Drag and Drop table

Drag and Drop table

Hello All,

 

We are working on SAP ui5 application where Drag and Drop between a table (Droppable Table sap.m) and List (Draggable Table as shown in figure) is required.

We followed this example:

http://scn.sap.com/community/developer-center/front-end/blog/2015/08/21/how-to-use-drag-and-drop-between-two-sapui5-ui-elements

 

In this example new item is added to droppable table when dropped, our requirement is to replace the item with dragged item.

 

We have implemented JQUERY plug-in and able to drag an items from List to table, but could not identify the Dropped Index.

JQUERY required:

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

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

 

Here is the code:

Problem: In Drop: method, how to get the Droppable Table Index where an item is dropped.

 

                $("#" + 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 draggedIndex = split[1];

                targetData[draggedIndex].id = materialData[draggedIndex].id;

                targetData[draggedIndex].description = materialData[draggedIndex].description;                        

targetModel.setData(targetData);

}});

 

PARAM “ui” gives the Index of Dragged Index and to get the Droppable table Index I tried the following:

 

var rowindex = $( this ).closest( 'tr' ).index();

var rowindex = $(this).parents("tr").index();
var rowindex = $(this).parent().parent().children().index($(this).parent);

 

These statements returns -1 all the time.

Please suggest solutions.


Regards,

Nagaraju A