Skip to Content
Author's profile photo Former Member

Draggable Controls in UI5 !

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 🙂 And there something called jQuery UI which makes life awesome. 😎 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="http://static.jsbin.…


Regards

Sakthivel

Assigned tags

      19 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Former Member
      Former Member

      Hi Sakthivel,

      Thanks for the post. Nice one!. One feedback though. I guess with respect to SAP UI5 applications, it is preferable to make any elements draggable or droppable inside "onAfterRendering" function of the controller.

      Thanks,

      Ramesh

      Author's profile photo Alexander Lenz
      Alexander Lenz

      Hi Ramesh,

      good point. But still the onAfterRendering of the controller is not good enough. To absolutely ensure that your control is rendered, I suggest to directly add the coding to the eventDelegate "onAfterRendering" of the control and not of the controller. When using the onAfterRendering of the controller i faced the issue several times, that it was instanciated too late.

      For me the securest way is to do it like this:

      var control = sap.ui.getCore().byId("IDControl");

      control.addEventDelegate({

         onAfterRendering: function () {}

      });

      Best Regards,

      Alexander

      Author's profile photo Former Member
      Former Member

      Hi Sakthivel,


      Real nice post! Thank you.


      Best regards,

      Frederico

      Author's profile photo Former Member
      Former Member

      Hi Sakthivel,

      Its really a  good one :-).

      you wrote "cancel: false" what is the use of it, If  I changed it to "cancel:true" also I can drag it.

      But if I commented that property  dragging function not working.

      could you please explain me the  use of  property cancel.

      Thanks,

      Best Regards,

      Viswanath

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      cancel option prevents the dragging from starting on specified element. By default cancel takes values as button/input/textarea/select/option. As i'm trying to make a button draggable, i have to provide a value to cancel so that it doesn't take the default value. So false here is just a dummy value used so that the default values are overridden. If no values are specified, button being one of the default value of cancel the dragging of the button wouldn't be possible.

      Author's profile photo Ravi kiran R
      Ravi kiran R

      Hi Sakthivel,

      Nice post. Curious to know if it is possible to keep one button fixed, such that if dragged it should create a duplicate button leaving main one behind. Not a use case though.

      Regards,

      Ravikiran

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      Yes, it's possible. The implementation have to be done similar to this example,

      https://jqueryui.com/droppable/#shopping-cart

      Author's profile photo Ravi kiran R
      Ravi kiran R

      Cool 🙂 .

      Thanks Sakthivel,

      Author's profile photo chetna dabra
      chetna dabra

      A very good post . Looking forward to implement it. Keep sharing your knowledge.

      Thank you,

      Regards,

      Chetna

      Author's profile photo Sergio Guerrero
      Sergio Guerrero

      nicely done Sakthivel

      Author's profile photo Kedar Tingikar
      Kedar Tingikar

      Awesome Sakthivel..

      I tried this with a Standard Tile and it worked perfectly.

      Regards,

      Kedar

      Author's profile photo chetna dabra
      chetna dabra

      hi,

      Can you tell me if i have something like this:

      new sap.m.HBox({

        id : "hboxId", // sap.ui.core.ID

        visible : true, // boolean

        items : [

             new sap.ui.commons.Label({

                  id:"outlbl",

                  text:"Dealer Code::",

                  width:"100px"

                  }),

                  new sap.ui.commons.TextField({

                  id:"outtxt"

                  }),

                  new sap.ui.commons.Label({

                  id:"saleOrglbl",

                  text:"Sales Organization::",

                 

                  }),

                  new sap.ui.commons.TextField({

                  id:"outText2"

                  }),

                  new sap.ui.commons.Label({

                  text:"Company Code::",

                  id:"cmpnyLbl"

                

                  }),

                  new sap.ui.commons.TextField({

                  id:"outTxt3"

                  }),

               

              

                ]

      // sap.ui.core.Control

      }),

      how do i call draggable() method of controls??

      i tried doing following thing:

         new sap.ui.commons.TextField({

                  id:"outTxt3"

                  }).draggable()

      But then it does not show the control itself.

      Some part of Index.html looks as follows:

      <head>

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

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

      <script src="resources/sap-ui-core.js" id="sap-ui-bootstrap"

        data-sap-ui-libs="sap.m,

      sap.ui.commons,sap.suite.ui.commons,sap.ui.table"

        data-sap-ui-theme="sap_bluecrystal">

        jQuery.sap.require("sap.ui.core.format.DateFormat");

        sap.ui.localResources("ExtendCntrol");

        jQuery.sap.require("ExtendCntrol.NewControl");

        </script>

      <!-- only load the mobile lib "sap.m" and the "sap_bluecrystal" theme -->

      <link rel="stylesheet" type="text/css" href="style.css">

      <script>

          $.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');

        var oDummy = new sap.ui.core.Control();

        sap.ui.core.Control.prototype.draggable = function(){

        var id = this.getId();

        $(document).ready(function(){

        $('#'+id).draggable({

        cancel :false

        });

        });

        }

        </script>

      Is this right way to include jquery libraries and defining draggable function for controls??

      I am not getting any error but controls are not being displayed after i add draggable function in the fashion shown above.

      Please help,

      Thank you,

      Best Regards,

      Chetna

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      I am not getting any error but controls are not being displayed after i add draggable function in the fashion shown above.

      See, when you do .draggable() the function doesn't return anything and hence no items would be added to your HBox. Try returning the control instance in the draggable function.

      return this; // in the end of the drag func

      JS Bin - Collaborative JavaScript Debugging&lt;/title&gt; &lt;link rel=&quot;alternate&quot; type=&quot;application/jso…

      Author's profile photo chetna dabra
      chetna dabra

      Ohh woww,

      Thank you so much.

      Really wonderful, Now it will be very easy for me to align my controls.

      Do you also know how to decrease the length of these textboxes? As you can see textboxes are very long, They are taking lot of space.

      Best Regards,

      Chetna

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      Better create a new thread for your questions off the topic.

      Author's profile photo chetna dabra
      chetna dabra

      Hie Sakthivel,

      Can you please tell me why the following is not working?

      I am not getting any error , also controls are being displayed.Only things is i am not able to drag them.

      Where did i go wrong?

      Code is:

      return new sap.m.Page({

      content: [

               

               

      new sap.m.HBox({

        id : "hboxId",

        visible : true,

        items : [

                new sap.ui.commons.Label({

                  id:"outlbl",

                  text:"Dealer Code::",

                  width:"100px"

                  }).draggable(),

                  new sap.ui.commons.TextField({

                  id:"outtxt",

                  width:"85px"

                 

                  }).draggable(),

                  new sap.ui.commons.Label({

                  id:"saleOrglbl",

                  text:"Sales Organization::",

                 

                  }).draggable(),

                  new sap.ui.commons.TextField({

                  id:"outText2",

                  width:"85px"

                  }).draggable(),

                  new sap.ui.commons.Label({

                  text:"Company Code::",

                  id:"cmpnyLbl"

                

                  }).draggable(),

                  new sap.ui.commons.TextField({

                  id:"outTxt3",

                  width:"85px"

                  }).draggable(),

               

              

                ]

      }),

      In index.html (as per you suggestion ), i have added this:

      <script>

          $.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');

         //var oDummy = new sap.ui.core.Control();

         sap.ui.core.Control.prototype.draggable = function(){

         var id = this.getId();

         $(document).ready(function(){

         $('#'+id).draggable({

         cancel :false

         });

         });

           return this;

         }

        </script>

      So why controls are not being dragged??

      Please help,

      Thank you,

      Best Regards,

      Chetna

      Author's profile photo Former Member
      Former Member

      These libraries doesnt support since 304 error in the debugger and if we drag the list items it is only working in desktop browser ....frankly speaking in mobile it doesnot work while dragging so if anyone achieved dragging items from one list to another using model data in mobile devices please share it will be helpful to all.

      Regards...

      Author's profile photo Former Member
      Former Member

      Hello Guys,

      Right way is to use addEventDelegate

      var oBtn1 = new sap.m.Button({

        text:"Cool Button"

        }).addEventDelegate({

        onAfterRendering:function() {

        $(arguments[0].srcControl.getDomRef()).draggable({ 

                             cancel : false 

                      });

        //Below code will not allow position change but drag will work

        //arguments[0].srcControl.getDomRef().draggable = true;

              

                },

              

            });

      -Br

      Ajay

      Author's profile photo Sagar Bansal
      Sagar Bansal

      Hi,

      Is this code still working? I tried the JS bin reference given here and found that it is not working.
      Is there any workaround for this?

       

      Thanks & Regards
      Sagar Bansal