Quantcast
Channel: SAPUI5 Developer Center
Viewing all articles
Browse latest Browse all 789

Draggable Controls in UI5 !

$
0
0

Hi All,

 

As some were asking about draggable controls in UI5, instead of scratching the head to build draggable UI5 Control i have accomplished it with jQuery draggable and the use of native HTML in UI5

 

Here is the working example. Modified & better versions are welcomed

 

JS Bin - Collaborative JavaScript Debugging</title> <link rel="icon" href="http://static.jsbin.…

 

// code

 

<!DOCTYPE html>

<html>

<head>

    <meta http-equiv='X-UA-Compatible' content='IE=edge' />

    <meta http-equiv='Content-Type' content='text/html;charset=UTF-8' />

    <title>Draggable in UI5</title>

    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">

    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>

    <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

    <script id='sap-ui-bootstrap' type='text/javascript' src='https://sapui5.hana.ondemand.com/resources/sap-ui-core-nojQuery.js' data-sap-ui-theme='sap_bluecrystal' data-sap-ui-libs='sap.m'></script> // bootstrapping sap-ui-core-nojQuery.js

    </script>


    <script id="view1" type="sapui5/xmlview">

        < core: View

         controllerName = "my.own.controller"

        xmlns = "sap.m"

        xmlns: l = "sap.ui.layout"

        xmlns: core = "sap.ui.core"

        xmlns: html = "http://www.w3.org/1999/xhtml" >

         < Page title = "Sakthi"

        id = "page1" > < content > < Button text = "I'm Native UI5 button" > < /Button>

                <html:style>

                  .draggable { width: 250px; height: 50px; padding:0.1em; display:inline-block; }

              </html: style > < html: div id = "draggable"

        class = "ui-widget-content draggable" > < html: p > I 'm Draggable in UI5 using Native HTML !</html:p>

                    </html:div>

  </content>

  </Page>

  </core:View>

    </script>


    <script>

        sap.ui.controller("my.own.controller", {});

         // instantiate the View

        var myView = sap.ui.xmlview({

            viewContent: jQuery('#view1').html()

        });

        var app = new sap.m.App("myApp", {

            initialPage: "page1"

        });

        app.addPage(myView);

        app.placeAt("content");

    </script>


    <script>

        $(function () {

            debugger

            $("#__xmlview0--draggable").draggable(); // Make it Draggable for the id.( the id gets generated as __xmlview0--draggable)

        });

    </script>

</head>

 

 

<body class='sapUiBody'>

    <div id='content'></div>

</body>

 

</html>


Regards

Sakthivel


Viewing all articles
Browse latest Browse all 789

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>