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
// 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