Drag Drop in SAPUI5

Click here and follow my SAP UI5/FIORI snippets and information Page

I have implemented drag and drop functionality in SAPUI5. You can drag the item from list and drop in table.You can't add(drop) same item in table.Go through it and please let me know in case of any issue/doubt.

Application Structure

View Part

<core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m" controllerName="dragdrop.S1" xmlns:html="http://www.w3.org/1999/xhtml">
<Page title="Drag Drop">
<content>
<List id="dragableList" width="500px" class="dragList" items="{data>/}">
<items>
<StandardListItem title="{data>id}" />
</items>
</List>
<Table id="dropableTable" inset="false" class="table">
<columns>
<Column hAlign="Center">
<Text text="Id" />
</Column>
<Column hAlign="Center">
<Text text="Name" />
</Column>
<Column hAlign="Center">
<Text text="Mob" />
</Column>
</columns>
<items>
</items>
</Table>
</content>
</Page>
</core:View>

Controller Part

    jQuery.sap.require('sap.ui.thirdparty.jqueryui.jquery-ui-core');
    jQuery.sap.require('sap.ui.thirdparty.jqueryui.jquery-ui-widget');
    jQuery.sap.require('sap.ui.thirdparty.jqueryui.jquery-ui-mouse');
    jQuery.sap.require('sap.ui.thirdparty.jqueryui.jquery-ui-sortable');
    jQuery.sap.require('sap.ui.thirdparty.jqueryui.jquery-ui-droppable');
    jQuery.sap.require('sap.ui.thirdparty.jqueryui.jquery-ui-draggable');
    jQuery.sap.require('sap.m.MessageBox');
    sap.ui.controller("dragdrop.S1", {
    // Initialization......
    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: "1089", Name: "vikas ", Mob: "1234567890"},
 {id: "1090", Name: "nikhil ", Mob: "555554345"},
 {id: "1091", Name: "prashant ", Mob: "1236454656"},
 {id: "1092", Name: "rohit ", Mob: "5657775757"}
 ];
 materialModel.setData(materials);
 this.getView().setModel(materialModel, "data");

 // Make list draggable.....
 oSortableList.onAfterRendering = function() {
        if (sap.m.List.prototype.onAfterRendering) {
            sap.m.List.prototype.onAfterRendering.apply(this);
        }
 $("#"+listUlId+" li").draggable({
        helper: "clone"
      });
    }

// Make table droppable.....
 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("data").getPath();
      var split = oPath.split("/");
  var i = split[split.length-1];
  var materialData = materialModel.getData();

  for(var k=0;k<oDropableTable.getItems().length;k++)
  {

  //If item already present in the table then it will prevent to add.....
  if(materialData[i].id===oDropableTable.getItems()[k].getAggregation("cells")                                   [0].getText())
  {
  sap.m.MessageBox.show(materialData[i].id+"  already added to table");
  return;
  }
  }
      oDropableTable.addItem(
         new sap.m.ColumnListItem({
         cells: [
               new sap.m.Text({text: materialData[i].id}),
                new sap.m.Text({text: materialData[i].Name}),
                new sap.m.Text({text: materialData[i].Mob})
                ]
         })
        );
      }
 })
    }
}
});

Result

    There is no item in table.You can drag item from list and add(drop) in table.

   
    One item has been added(dropped) in table from list.  

   Three items have been added(dropped) in table from list.

 
    If you add(drop) same item in table from list then it will not add(drop) and show one validation message.