How to use drag and drop between two SAPUI5 UI ... | SCN http://scn.sap.com/community/developer-center/front-end/blog/2015/0...

Getting Started Newsletters Store

Hi, Guest Log On Join Us

Products Services & Support About SCN Downloads

Activity Communications Actions
Industries Training & Education Partnership Developer Center

Lines of Business University Alliances Events & Webinars Innovation Browse

SAPUI5 Developer Center

How to use drag and drop between two SAPUI5 UI

elements
Posted by Stephanie Lemoine in SAPUI5 Developer Center on Aug 21, 2015 4:08:22 PM

Share 12 Tweet Like 0

In this tutorial I will explain how you can implement drag and drop in SAPUI5. We'll create a list from which we can drag
the list items into a table. The details of the list item will be added as a row in the table. For a demo, look at the following
video:

JQuery UI provides easy functionalities to implement drag and drop. To access these functionalities we need
to import these libraries to our project. To to so, add the following code to your index page:

01. <script>
02. jQuery(function() {
03. $.sap.require('sap.ui.thirdparty.jqueryui.jquery-ui-core');
04. $.sap.require('sap.ui.thirdparty.jqueryui.jquery-ui-widget');
05. $.sap.require('sap.ui.thirdparty.jqueryui.jquery-ui-mouse');
06. $.sap.require('sap.ui.thirdparty.jqueryui.jquery-ui-sortable');
07. $.sap.require('sap.ui.thirdparty.jqueryui.jquery-ui-droppable');
08. $.sap.require('sap.ui.thirdparty.jqueryui.jquery-ui-draggable');
09.
10. sap.ui.localResources("sapui5draganddrop");
11. var app = new sap.m.App();
12. var page = sap.ui.view({id:"iddetail1", viewName:"sapui5draganddrop.detail", type:sap.ui.core.mvc.ViewType.XML});
13. app.addPage(page);
14. app.placeAt("content");
15.
16. });
17. </script>

My code in my view is the following:

01. <HBox>
02. <List id="dragableList" width="200px" class="dragList" items="{materials>/}">
03. <items>
04. <StandardListItem title="{materials>description}" />
05. </items>
06. </List>
07. <Table id="dropableTable" inset="false" width="500px" class="table">
08. <columns>
09. <Column hAlign="Center">
10. <Text text="Material" />
11. </Column>
12. <Column hAlign="Center">
13. <Text text="Vendor" />
14. </Column>
15. </columns>
16. <items>
17. </items>
18. </Table>

1 de 3 09/08/2016 13:07
How to use drag and drop between two SAPUI5 UI ... | SCN http://scn.sap.com/community/developer-center/front-end/blog/2015/0...

19. </HBox>

In an HBox I added the list and the table. Make sure you give both the list and the table an ID, we need this in the
controller.

In our controller, we will implement our code in the onInit() function. First part is general coding where I define my
variables and set my model:

01. onInit: function() {

02. var oSortableList = this.getView().byId("dragableList");
03. var listId = oSortableList.getId();
04. var listUlId = listId + "-listUl";
05. var materialModel = new sap.ui.model.json.JSONModel();
06. var oDropableTable = this.getView().byId("dropableTable");
07. var tableId = oDropableTable.getId();
08. var materials = [
09. {id: "0", description: "material 1", vendor: "vendor 1"},
10. {id: "1", description: "material 2", vendor: "vendor 1"},
11. {id: "2", description: "material 3", vendor: "vendor 2"},
12. {id: "3", description: "material 4", vendor: "vendor 2"}
13. ];
14. materialModel.setData(materials);
15. this.getView().setModel(materialModel, "materials");

The first step we need to do is make the list drag-able, you can do this with the following code:

01. oSortableList.onAfterRendering = function() {

02. if (sap.m.List.prototype.onAfterRendering) {
03. sap.m.List.prototype.onAfterRendering.apply(this);
04. }
05. $("#"+listUlId+" li").draggable({
06. helper: "clone"
07. });
08. }

When you implemented this code you'll see that you can drag the list items, but when you drop them, nothing happens.
For that we need to make our table drop-able:

01. oDropableTable.onAfterRendering = function() {

02. if (sap.m.Table.prototype.onAfterRendering) {
03. sap.m.Table.prototype.onAfterRendering.apply(this);
04. }
05.
06. $("#"+tableId).droppable({
07. drop: function( event, ui ) {
08. var listElementId = ui.draggable.context.id;
09. var draggedElement = sap.ui.getCore().byId(listElementId);
10. var oPath = draggedElement.getBindingContext("materials").getPath();
11. var split = oPath.split("/");
12. var i = split[1];
13.
14. var materialData = materialModel.getData();
15.
16. oDropableTable.addItem(
17. new sap.m.ColumnListItem({
18. cells: [
19. new sap.m.Text({text: materialData[i].description}),
20. new sap.m.Text({text: materialData[i].vendor})
21. ]
22. })
23. );
24. }
25. })
26. }

When the drop event is triggered, we can access the ID of our list item which we have dropped on the table. With this ID
we can access the list item, retrieve the binding context and the path. And with this path we can read out the correct line
from our material data. We then add this data as an item to our table.

And that's how easy it is to implement drag and drop functionalities in SAPUI5.

Remark: it does seem that the two elements need to be in the same element (in this case the HBox). I tested to see if it
is for example possible to drag in a splitapp from the master view to the detail view but this doesn't seem to be possible.
So there are some limitations.

2161 Views Categories: SAPUI5

Average User Rating

(1 rating)

Share 12 Tweet Like 0

2 de 3 09/08/2016 13:07
How to use drag and drop between two SAPUI5 UI ... | SCN http://scn.sap.com/community/developer-center/front-end/blog/2015/0...

3 Comments

Sai Vellanki Aug 21, 2015 7:37 PM

Good one Stephanie, Thanks for sharing!

Regards,
Sai Vellanki.

Like (0)

Neil Gardiner Oct 13, 2015 11:43 PM

Hi Stephanie,

Are you able to add code snippets rather than screen shots? This makes it easier for others who wish
to C&P the code if they want to try the solution for themselves.

Cheers,
Neil

Like (0)

Stephanie Lemoine Oct 14, 2015 3:21 PM (in response to Neil Gardiner)

Hi Neil,

I replaced the images with code snippets. Didn't know how to do that when I wrote this blog
:-).

Cheers,
Stephanie

Like (0)

Site Index Contact Us SAP Help Portal

Follow SCN
Privacy Terms of Use Legal Disclosure Copyright

3 de 3 09/08/2016 13:07