View Full Version : Dragging tree nodes onto leaf nodes?

10 May 2007, 1:15 PM
Imagine you have a tree panel showing a file system. Now, imagine you see some empty folders and want to move some files into them. How can that be done using drag and drop? It's a seemingly relatively simple task, but so far I'm clueless as to how to set up my tree panel to allow that :(.

10 May 2007, 2:20 PM
Have you looked at examples? There are draggable tree examples and code of these examples is available too in the Learn/API and Examples section.

10 May 2007, 2:33 PM
Of course :). I've also mucked around in Ext's source code a bunch too, to no avail. There aren't any examples, in the documentation or the forums, that allow nodes to be dragged onto leaves, either. This is a necessary feature for me, so worst case I'll have to hack it in myself.

10 May 2007, 2:37 PM
I don't know if this is possible but:

Could you listen to nodedragover and beforenodedrop events? First to show user proper drop enabled indicator and second to turn leaf into node before the drop.

Just idea. Never tried.

10 May 2007, 7:05 PM
check out my solution,

I extend the tree so when u create the TreeNode, set "leaf:false", put it into the tree and expand it, it will stay a folder even it is empty. I didn't try but if it is a folder, then u can drop thing to it.

11 May 2007, 2:26 PM
Thanks for the replies; they helped point me towards the fix :). My solution was to make the following modification to Ext.tree.TreeDropZone:

getDropPoint : function(e, n, dd){
var tn = n.node;
return tn.allowChildren !== false ? "append" : false; // always append for root
var dragEl = n.ddel;
var t = Ext.lib.Dom.getY(dragEl), b = t + dragEl.offsetHeight;
var y = Ext.lib.Event.getPageY(e);
- var noAppend = tn.allowChildren === false || tn.isLeaf();
+ var noAppend = tn.allowChildren === false;
if(this.appendOnly || tn.parentNode.allowChildren === false){
return noAppend ? false : "append";
var noBelow = false;
noBelow = tn.hasChildNodes() && tn.isExpanded();
var q = (b - t) / (noAppend ? 2 : 3);
if(y >= t && y < (t + q)){
return "above";
}else if(!noBelow && (noAppend || y >= b-q && y <= b)){
return "below";
return "append";

That one little change (denoted in diff style by the -/+) is all that is needed for the proper functionality, though to fix a couple UI glitches you'll need to apply the fixes I posted in the following bug reports:
TreePanel drag/drop bug (http://www.extjs.com/forum/showthread.php?t=6105)
Ext.data.Node bug moving between children/no_children states (http://www.extjs.com/forum/showthread.php?t=6106)

To avoid changing the core code or creating new classes, you can make those 3 changes very easily by using Ext.override :).

11 May 2007, 2:31 PM
Thanks a lot for sharing. I appreciate very much the way you handle and post bugs. Explain, show cause and propose solution. Fantastic !

=D> =D> =D>

12 May 2007, 6:19 AM
No problem; I interned a couple summers at Adobe working on a big project where I'd be submitting and fixing bugs quite often, so I've learned what makes (and don't make) good bug reports :).

FYI, thanks to a vague hint by Jack (http://extjs.com/forum/showthread.php?t=6106) I've found an even cleaner way (http://extjs.com/forum/showthread.php?t=4126) to get the desired functionality: set all nodes to leaf=false, and all leaves (according to the CS and TreePanel definitions of leaves, nodes with no children) to expanded=true and children=empty array (not null!). With that, you don't need the above-mentioned fix or the "Ext.data.Node bug moving between children/no_children states" fix, though my TreePanel drag/drop bugfix (http://www.extjs.com/forum/showthread.php?t=6105) is still needed.

1 Feb 2012, 7:22 AM
Hi ,

Am seeing this problem still in extjs 4.0.5 ,Is it fixed,any Workaround....