Skip to Content

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.

To report this post you need to login first.

5 Comments

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

  1. Neil Gardiner

    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

    (0) 
  2. Anthony Parkinson

    I am having trouble recreating this in Web IDE.  Can you show the whole index,htnl file, I think that the $.sap.require(‘sap.ui.thirdparty.jqueryui.jquery-ui-core’); line is not happening until after oSortableList.onAfterRendering leading to an error on $(“#”+listUlId+” li”).draggable({

    Object doesn’t support property or method ‘draggable’

     

    my index.html

     

    <!DOCTYPE HTML>
    <html>

    <head>
    <meta http-equiv=”X-UA-Compatible” content=”IE=edge” />
    <meta charset=”UTF-8″>

    <title>TestDD</title>

    <script>
    </script>

    <script id=”sap-ui-bootstrap”
    src=”../../resources/sap-ui-core.js”
    data-sap-ui-libs=”sap.m”
    data-sap-ui-theme=”sap_belize”
    data-sap-ui-compatVersion=”edge”
    data-sap-ui-resourceroots='{“TestDDTestDD”: “”}’>
    </script>

    <link rel=”stylesheet” type=”text/css” href=”css/style.css”>

    <script>
    debugger;
    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.getCore().attachInit(function() {
    new sap.m.Shell({
    app: new sap.ui.core.ComponentContainer({
    height : “100%”,
    name : “TestDDTestDD”
    })
    }).placeAt(“content”);
    });
    </script>
    </head>

    <body class=”sapUiBody” id=”content”>
    </body>

    </html>

     

    my controller

     

    sap.ui.define([
    “sap/ui/core/mvc/Controller”
    ], function(Controller) {
    “use strict”;

    return Controller.extend(“TestDDTestDD.controller.sapui5draganddrop”, {

    onInit: function() {
    debugger;
    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”);

    oSortableList.onAfterRendering = function() {
    debugger;
    if (sap.m.List.prototype.onAfterRendering) {
    sap.m.List.prototype.onAfterRendering.apply(this);
    }

    $(“#”+listUlId+” li”).draggable({
    helper: “clone”
    });

    }

    }
    });
    });

     

     

    (0) 

Leave a Reply