Currently, I am utilizing connected trees with Angular UI Tree. In this setup, Tree1 has a single level of depth, while Tree2 has an unlimited depth. My requirement is to enable the ability to drag any item from Tree2 INTO the items in Tree1 and capture that event.
To clarify further: Essentially, Tree1 represents the top-level items of Tree2, facilitating smooth movement of items within the overall data structure.
I couldn't find a direct method for accomplishing this in the existing documentation, so I took the following approach: I disabled dropping on Tree1:
<div ui-tree="tree1Options" id="tree1-root" data-nodrop-enabled='true'>
And then, I added the following callbacks on Tree2:
<div ui-tree="tree2Options" id="tree2-root">
$scope.tree2Options = {
dropped : function(event) {
console.log("dropped" + event);
},
dragStop : function(event) {
console.log("dragStop" + event);
},
beforeDrop : function(event) {
console.log("beforeDrop" + event);
},
}
Despite dragging an item from Tree2 onto Tree1 without showing a placeholder (which is acceptable), I'm unable to ascertain the specific destination where the drop occurred. It appears that the destination is being treated as the source.
Any suggestions? Furthermore, if you have a more efficient method for achieving the DROP INTO functionality, please share.