Skip to Content

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

To report this post you need to login first.

18 Comments

You must be Logged on to comment or reply to a post.

  1. Ramesh Thangamuthu

    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

    (0) 
    1. 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

      (0) 
  2. Viswanath Golakoti

    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

    (0) 
    1. Sakthivel Elango 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.

      (0) 
  3. 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

    (0) 
  4. 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

    (0) 
    1. Sakthivel Elango 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…

      (0) 
      1. 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

        (0) 
      2. 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

        (0) 
  5. Sarvan Singh Gill

    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…

    (0) 
  6. Ajay Nayak

    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

    (0) 

Leave a Reply