Dragging and dropping is a useful functionality and can be easily implemented with the aid of JQuery UI. The JQuery UI libraries can be imported and the functionality added to the elements by adding code in the onAfterRendering. This can lead to alot of code in your view, so why not move all this drag & drop functionality to the control by extending it.
Custom Control...
The First step is to create the custom control, In this case I extend the StandardListItem to create my new control DragDropListItem.
I import the jqueryui libraries and also the StandardListItem and the StandardListItemRenderer, I will reuse this renderer as I will not change anything in respect to rendering.
sap.ui.define(
[
"sap/m/StandardListItem",
"sap/m/StandardListItemRenderer",
"sap/ui/thirdparty/jqueryui/jquery-ui-core",
"sap/ui/thirdparty/jqueryui/jquery-ui-widget",
"sap/ui/thirdparty/jqueryui/jquery-ui-mouse",
"sap/ui/thirdparty/jqueryui/jquery-ui-sortable",
"sap/ui/thirdparty/jqueryui/jquery-ui-droppable",
"sap/ui/thirdparty/jqueryui/jquery-ui-draggable"
],
function(StandardListItem, StandardListItemRenderer) {
var DragDroplistItem = StandardListItem.extend("CSID.KPIDashboard2.controls.DragDroplistItem", {
renderer: StandardListItemRenderer,
What next...
The only other thing we need to to is add the drag drop functionality to the control. It cannot be added to the control directly so we need to add it to the dom reference. This can only be done after the control is rendered. So we overwrite the onAfterRendering function.
onAfterRendering: function(args) {
if (StandardListItem.prototype.onAfterRendering) {
StandardListItem.prototype.onAfterRendering.apply(this, args);
}
this.$().draggable({
grid: [ 20, 20 ],
appendTo: "body",
containment: "window",
cursorAt: {left: 36, top: 36},
cursor: "move",
helper: function(e, ui) {
var $img = "https://experience.sap.com/fiori-design-web/wp-content/uploads/sites/5/2016/01/Thumbnail-Bar-Chart.png";
var $d = $("<div>");
$d.css({
"width": "72px",
"height": "72px",
"background-image": "url(" + $img + ")",
"background-repeat": "no-repeat",
"background-size": "72px 72px;"
});
return $d;
,
opacity: "0.5",
refreshPositions: true,
revert: "invalid",
revertDuration: 300,
zIndex: "1000000",
snap: true,
scroll: true
});
}
In the onAfterRendering function we first call the on after rendering function of the control we have extended, this is standard practice.
Then we add the draggable code to the it. We get a JQuery representation of the DOM element by using this.$() and then we use the draggable function with the parameters required.
A list of these parameters can be found at
http://api.jqueryui.com/draggable/
Now we can use the DragDropListItem in a list as normal however we can grab it and drag it out.
The next step would be to create a Droppable Area so we can use it
🙂
