Skip to Main Content

APEX

Announcement

For appeals, questions and feedback about Oracle Forums, please email oracle-forums-moderators_us@oracle.com. Technical questions should be asked in the appropriate category. Thank you!

Interested in getting your voice heard by members of the Developer Marketing team at Oracle? Check out this post for AppDev or this post for AI focus group information.

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
1,076 views