How to use drag and drop between two SAPUI5 UI elements

[Former Member]

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:

<script>

  jQuery(function() {

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

     $.sap.require('sap.ui.thirdparty.jqueryui.jquery-ui-droppable');

     $.sap.require('sap.ui.thirdparty.jqueryui.jquery-ui-draggable');

    

     sap.ui.localResources("sapui5draganddrop");

  var app = new sap.m.App();

  var page = sap.ui.view({id:"iddetail1", viewName:"sapui5draganddrop.detail", type:sap.ui.core.mvc.ViewType.XML});

  app.addPage(page);

  app.placeAt("content");

    

  });

  </script>

My code in my view is the following:

<HBox>

  <List id="dragableList" width="200px" class="dragList" items="{materials>/}">

       <items>

            <StandardListItem title="{materials>description}" />

       </items>

  </List>

  <Table id="dropableTable" inset="false" width="500px" class="table">

       <columns>

            <Column hAlign="Center">

                 <Text text="Material" />

       </Column>

       <Column hAlign="Center">

            <Text text="Vendor" />

       </Column>

       </columns>

            <items>

            </items>

    </Table>

  </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:

onInit: function() {

  var oSortableList = this.getView().byId("dragableList");

  var listId = oSortableList.getId();

  var listUlId = listId + "-listUl";

  var materialModel = new sap.ui.model.json.JSONModel();

  var oDropableTable = this.getView().byId("dropableTable");

  var tableId = oDropableTable.getId();

  var materials = [

  {id: "0", description: "material 1", vendor: "vendor 1"},

  {id: "1", description: "material 2", vendor: "vendor 1"},

  {id: "2", description: "material 3", vendor: "vendor 2"},

  {id: "3", description: "material 4", vendor: "vendor 2"}

  ];

  materialModel.setData(materials);

  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:

oSortableList.onAfterRendering = function() {

         if (sap.m.List.prototype.onAfterRendering) {

             sap.m.List.prototype.onAfterRendering.apply(this);

         }

  $("#"+listUlId+" li").draggable({

         helper: "clone"

       });

     }

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:

oDropableTable.onAfterRendering = function() {

         if (sap.m.Table.prototype.onAfterRendering) {

             sap.m.Table.prototype.onAfterRendering.apply(this);

         }

        

  $("#"+tableId).droppable({

       drop: function( event, ui ) {

       var listElementId = ui.draggable.context.id;

       var draggedElement = sap.ui.getCore().byId(listElementId);

       var oPath = draggedElement.getBindingContext("materials").getPath();

       var split = oPath.split("/");

   var i = split[1];

  

   var materialData = materialModel.getData();

      

       oDropableTable.addItem(

          new sap.m.ColumnListItem({

          cells: [

                 new sap.m.Text({text: materialData[i].description}),

                 new sap.m.Text({text: materialData[i].vendor})

                 ]

          })

         );

       }

  })

     }

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.