Skip to Main Content

How to make Drag&Drop in tree widget working? (Apex 19.2)

John like many othersNov 9 2020 — edited Nov 9 2020

Hello
I'm working with the tree widget of Apex to display a tree after page load (Apex 19.2). This is all working fine. Now I want to allow the users to drag&drop tree nodes inside the tree. I checked/followed the doc of Apex 19.2 API:
Enable drag&drop in treeView:
var tree = $( "#HIERARCHYTREE_tree" );
// Get adatapter data
var adapter = tree.treeView( "getNodeAdapter" );
// Get drag option state
console.log (tree.treeView( "option", "dragAndDrop" ) );
// Output: false
// Enable drag in treeView
tree.treeView( "option", "dragAndDrop", true );
// Check if it's set now
console.log (tree.treeView( "option", "dragAndDrop" ) );
// Output: true

-> So far, so good in/for treeView. Furthermore the doc mentions this:
If true drag and drop is supported. The treeNodeAdapter must also support drag and drop.
Ok, switching to to AdapterNode documentatin where I can't find drag related setter functions, only two getter functions:
allowDrag (true if allowed, else false)
dragOperations (type of possible operations)
I can check the states:
allowDrag shows me "false", dragOperations shows me {normal: "move", ctrl: "copy"} on any node in the tree.
Questions: Now I wonder how I can enable the drag operation on Adapter level after the tree was generated? How can I remove the "copy" operation (I only want to allow "move")?

As I need to update the tree in the background in the DB as well I need to be able to react on move-drag operations. Based on the documentation I tried this (similar way as I react on selectionChange when user clicks on an element in the tree and the event fires as it should):
// Page load event:
var tree = $( "#HIERARCHYTREE_tree" );
//The way I have implemented selectionChange and is working:
tree.on( "start", function( event, ui ) {
alert ("drag start");
} );
-> Uncaught TypeError: apex.da.initDaEventList is not a function
// Trial 2:
tree.on( "treeviewstart", function( event, ui ) { // also tried 'treeviewStart' and just 'start' instead of 'treeviewstart'
alert ("drag start");
} );
In case of 'Trial 2' nothing happens (no alert message) while dragging.. I don't know how the drag visually should look like if there is any (do I see the grabbed tree moving?) or it's simply not working/firing because it's not activated on TreeNodeAdapter level?
I also tried to find any example of drag&drop operation in the Internet but couldn't find them for Apex. So before spending more hours on trying to make it work I come to this place in hope someone can confirm me drag&drop operation is working in Apex tree widget and even better: a simple code sample.
Thank you
John

Comments
Post Details
Added on Nov 9 2020
3 comments
222 views