PDA

View Full Version : Regarding tree node drag and drop



ssa962
24 Aug 2007, 12:48 AM
Hi All,
I have been trying to figure out this DnD problem for last couple of days but without any luck. What I would like to do is to allow the users to reorder the tree nodes but not to drop a node inside another node. I have used the nodedragover event to achieve this but this doesn't do the work. Here is my code -



tree.on('nodedragover', ondragover);

function ondragover(e) {
// what can I do here to only allow reordering of the nodes?
return true; // if user is reordering the nodes
return false; // if user is dropping a node on another node
}


Any help will be highly appreciated.

Animal
24 Aug 2007, 12:50 AM
http://extjs.com/deploy/ext/docs/output/Ext.tree.TreeNode.html#config-allowDrop ?

ssa962
24 Aug 2007, 1:18 AM
http://extjs.com/deploy/ext/docs/output/Ext.tree.TreeNode.html#config-allowDrop ?

Thanks a lot.

ssa962
24 Aug 2007, 1:48 AM
http://extjs.com/deploy/ext/docs/output/Ext.tree.TreeNode.html#config-allowDrop ?

Just noticed something, the reordering happens only at the first level i.e. only the direct children of the root can be reordered. Any idea why I can't reorder the other nodes? Also, is it possible to prevent reordering of certain nodes?

PS: I've set "allowDrop" to false for all nodes in my tree.

Animal
24 Aug 2007, 2:36 AM
allowDrop:false on a folder means you won't be able to reorder its children. Obviously.

ssa962
24 Aug 2007, 8:03 AM
allowDrop:false on a folder means you won't be able to reorder its children. Obviously.

Is it possible to find out whether the node is being dropped on another node or it is just being placed in between two nodes (reordering) ? Is this information available in any of the events?

para
24 Aug 2007, 8:12 AM
Yes, all the information that Ext has, you have.
I've got extremely complicated DnD rules on my trees. Here's the event I use.



tree.on('nodedragover', function(e){
var target = (e.point == 'append') ? e.target : e.target.parentNode;
// target is the node that WILL be the NEW PARENT
return target.canHaveChild(e.dropNode, e);
});


Most of the processing I do is in canHaveChild().

e.point gives the point for dropping (can be 'append', 'above', or 'below')
e.target gives the drop target (new parent node for 'append', new sibling node for 'above' or 'below')

ssa962
24 Aug 2007, 8:23 AM
e.point gives the point for dropping (can be 'append', 'above', or 'below')
e.target gives the drop target (new parent node for 'append', new sibling node for 'above' or 'below')

Thank you very much for that information - really appreciate it.