Technology Blogs by SAP
Learn how to extend and personalize SAP applications. Follow the SAP technology blog for insights into SAP BTP, ABAP, SAP Analytics Cloud, SAP HANA, and more.
Showing results for 
Search instead for 
Did you mean: 
Former Member

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

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'.

        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

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