Hi All,
This blog explains how to make an UI5 control draggable using a very simple example. If you have ever tried jQuery you would know, it makes life easier :smile: And there something called jQuery UI which makes life awesome. :cool: We gonna achieve our task using jQuery UI. UI5 comes with jQuery as well as jQuery UI. But only jQuery is available with the normal bootstrap of an UI5 app. If we wanna use jQuery UI we have to add those files to our app manually. So we shall do this first , To add a file, $.sap.require() can be used.
// Include jquery UI plugins
$.sap.require('sap.ui.thirdparty.jqueryui.jquery-ui-core');
$.sap.require('sap.ui.thirdparty.jqueryui.jquery-ui-widget');
$.sap.require('sap.ui.thirdparty.jqueryui.jquery-ui-mouse');
$.sap.require('sap.ui.thirdparty.jqueryui.jquery-ui-draggable');
$.sap.require('sap.ui.thirdparty.jqueryui.jquery-ui-sortable');
Once the jQuery UI files are added, lets create a button
var oButton = new sap.m.Button("btn",{text:"Drag Me");
Now to make this button draggable, we are going to use jQuery to retrieve the button from the DOM and add the function draggable to it. To retrieve the button from the DOM we gonna use the button id which we have set it as 'btn'.
$("#btn").draggable({
cancel : false
});
But this may or may not work. The reason being is at the time of the execution of the above code, UI5 may or may not have rendered the control oButton which we created initially and added it to the DOM . So to make sure all the controls are available we gonna wrap the above code into
$(document).ready(function(){
$("#btn").draggable({
cancel : false
});
});
So, now wrapping the code in $(document).ready makes sure that the DOM is loaded which means all our controls will be accessible from the DOM.
I've created a snippet where you can find this example, JS Bin - Collaborative JavaScript Debugging</title> <link rel="icon" href="h...
Regards
Sakthivel
