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
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
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
Hi Sakthivel,
Real nice post! Thank you.
Best regards,
Frederico
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
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.
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
Yes, it's possible. The implementation have to be done similar to this example,
https://jqueryui.com/droppable/#shopping-cart
Cool 🙂 .
Thanks Sakthivel,
A very good post . Looking forward to implement it. Keep sharing your knowledge.
Thank you,
Regards,
Chetna
nicely done Sakthivel
Awesome Sakthivel..
I tried this with a Standard Tile and it worked perfectly.
Regards,
Kedar
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
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</title> <link rel="alternate" type="application/jso…
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
Better create a new thread for your questions off the topic.
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
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...
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
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