Dragging tree nodes onto leaf nodes?

[IGx89]

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 .

[jsakalos]

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.

[IGx89]

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.

[jsakalos]

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.

[chun499]

check out my solution,
http://extjs.com/forum/showthread.php?t=5732

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.

[IGx89]

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;
        if(tn.isRoot){
            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;
        if(!this.allowParentInsert){
            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";
        }else{
            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
Ext.data.Node bug moving between children/no_children states

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

[jsakalos]

Thanks a lot for sharing. I appreciate very much the way you handle and post bugs. Explain, show cause and propose solution. Fantastic !

[IGx89]

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 I've found an even cleaner way 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 is still needed.

[JDevloper]

Hi ,

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

Thanks