How to drag and drop rows of a table - sapui5

Question

In my view.xml file:
<html:div class="container-fluid">
<html:div class="row">
<Table id="ConnectorModuleTable"
items="{
path: '/datalist'}">
<columns>
<Column ><Text text="Connector Module"/></Column>
<Column ><Text text="Setting A"/></Column>
<Column ><Text text="Setting B"/></Column>
<Column ><Text text="Custom Pin"/></Column>
<Column ><Text text="Actions"/></Column>
</columns>
<items>
<ColumnListItem>
<cells>
<Text text="{Connectormodule}" wrapping="false" />
<Text text="{settingA}" wrapping="false" />
<Text text="{settingB}" wrapping="false" />
<Text text="{settingB}" wrapping="false" />
</cells>
</ColumnListItem>
</items>
</Table>
</html:div>
</html:div>
I am trying to drag and drop the rows of this table
I have referred the link from docs showing for list as:
Documentation example link here
The same I have applied with the table in controller as :
attachDragAndDrop: function () {
var oList = this.byId("MyTable");
oList.addDragDropConfig(new DragInfo({
sourceAggregation: "items"
}));
oList.addDragDropConfig(new DropInfo({
targetAggregation: "items",
dropPosition: "Between",
dropLayout: "Vertical",
drop: this.onDrop.bind(this)
}));
},
onDrop: function (oInfo) {
var oDragged = oInfo.getParameter("draggedControl"),
oDropped = oInfo.getParameter("droppedControl"),
sInsertPosition = oInfo.getParameter("dropPosition"),
oDraggedParent = oDragged.getParent(),
oDroppedParent = oDropped.getParent(),
oDragModel = oDraggedParent.getModel(),
oDropModel = oDroppedParent.getModel(),
oDragModelData = oDragModel.getData(),
oDropModelData = oDropModel.getData(),
iDragPosition = oDraggedParent.indexOfItem(oDragged),
iDropPosition = oDroppedParent.indexOfItem(oDropped);
// remove the item
var oItem = oDragModelData[iDragPosition];
oDragModelData.splice(iDragPosition, 1);
if (oDragModel === oDropModel && iDragPosition < iDropPosition) {
iDropPosition--;
}
// insert the control in target aggregation
if (sInsertPosition === "Before") {
oDropModelData.splice(iDropPosition, 0, oItem);
} else {
oDropModelData.splice(iDropPosition + 1, 0, oItem);
}
if (oDragModel !== oDropModel) {
oDragModel.setData(oDragModelData);
oDropModel.setData(oDropModelData);
} else {
oDropModel.setData(oDropModelData);
}
},
initData: function (datalist) {
this.byId("MyTable").setModel(new JSONModel([
datalist
]));
}
Here datalist has all rows data in JSON (for ref)
But this did n't work , any help or guiding links are appreciated

Answer 1

I used the following view with your onDrop() and it worked.
Can you describe, what is not working?
<Table id="MyTable" items="{/}">
<columns>
<Column ><Text text="Connector Module"/></Column>
<Column ><Text text="Setting A"/></Column>
<Column ><Text text="Setting B"/></Column>
</columns>
<dragDropConfig>
<dnd:DragDropInfo
sourceAggregation="items"
targetAggregation="items"
dropPosition="Between"
drop=".onDrop"/>
</dragDropConfig>
<items>
<ColumnListItem>
<cells>
<Text text="{Connectormodule}" wrapping="false" />
<Text text="{settingA}" wrapping="false" />
<Text text="{settingB}" wrapping="false" />
<Text text="{settingB}" wrapping="false" />
</cells>
</ColumnListItem>
</items>
</Table>

Answer 2

Can you see data in the original table?
Setting of the model is incorrect: the JSONModel constructor needs an object rather than an array as listed in your initData function. It seems like a binding problem to me...
I just tried to modify your code as follows and everithing works fine:
onDrop: function (oInfo) {
var oDragged = oInfo.getParameter("draggedControl"),
oDropped = oInfo.getParameter("droppedControl"),
sInsertPosition = oInfo.getParameter("dropPosition"),
oDraggedParent = oDragged.getParent(),
oDroppedParent = oDropped.getParent(),
oDragModel = oDraggedParent.getModel(),
oDropModel = oDroppedParent.getModel(),
oDragModelData = oDragModel.getData(),
oDropModelData = oDropModel.getData(),
iDragPosition = oDraggedParent.indexOfItem(oDragged),
iDropPosition = oDroppedParent.indexOfItem(oDropped);
// remove the item
var oItem = oDragModelData.datalist[iDragPosition];
oDragModelData.datalist.splice(iDragPosition, 1);
if (oDragModel === oDropModel && iDragPosition < iDropPosition) {
iDropPosition--;
}
// insert the control in target aggregation
if (sInsertPosition === "Before") {
oDropModelData.datalist.splice(iDropPosition, 0, oItem);
} else {
oDropModelData.datalist.splice(iDropPosition + 1, 0, oItem);
}
if (oDragModel !== oDropModel) {
oDragModel.setData(oDragModelData);
oDropModel.setData(oDropModelData);
} else {
oDropModel.setData(oDropModelData);
}
},
initData: function (datalist) {
//just an example
var oData = {
datalist: [{
Connectormodule: "one",
settingA: "one",
settingB: "one"
}, {
Connectormodule: "two",
settingA: "two",
settingB: "two"
}, {
Connectormodule: "three",
settingA: "three",
settingB: "three"
}]
};
var oModel = new sap.ui.model.json.JSONModel(oData);
this.byId("ConnectorModuleTable").setModel(oModel);
},