Currently, I am working on implementing the drag and drop feature in SAPUI5 Table and Tree Table.
In my project, there is a table containing names that need to be draggable, and a Tree Table where these names should be droppable.
To achieve this functionality, I have utilized JqueryUI for drag and drop implementation, which is functioning correctly.
However, a challenge arises when dragging a name towards the Tree Table as it gets hidden behind the table, causing confusion for the user.
Upon investigating the issue, I discovered that the problem lies in the default CSS position applied in SAPUI5.
Below is the code snippet used for drag and drop:
var oMemberId;
$(".selector Table").draggable({
helper: "clone",
cursor: "pointer",
revert: "invalid",
zIndex: 9999,
start: function(event) {
oSelectedId = this.parentNode.previousSibling.firstChild.childNodes[0].value;
}
}).disableSelection();
$(".selector treetable").droppable({
drop: function(event){
var dataLevel=(this.attributes["data-sap-ui-level"].value);
var oDropAreaId = this.childNodes[2].textContent;
}
}).disableSelection();
I am seeking a solution to prevent the dragged item from becoming hidden while moving towards the Tree Table. Any suggestions or insights would be greatly appreciated.