Question

I need some combined functionality regarding drag’n’drop between two trees in ExtJS.

The first required feature is very simple and is just the builtin drag’n’drop features isolated to a single tree only.

The second required feature is that I wan’t the user to be able to drag a node from the left tree and drop it at any node in the right tree.

The action should not remove the node from the left tree, thus creating the possibility of dragging the same node from the left tree to multiple places in the right tree.

My question is: Which approach should I take to combine these two functionalities, utilizing the existing possibilities in the TreePanel object without inventing the wheel again? I am not looking for a complete solution (it would be nice though 😉 ), but rather how to handle drag/drop-zones, events and so on.

Answer 1

Okay. I have been thinking about this some time now, and the following approach seems to work for me 🙂

I have configured the left tree as this:

listeners:
{
    beforenodedrop: function (dropEvent) {
        // Does this node come from the right tree?
        if (dropEvent.source.tree.id !== dropEvent.tree.id) {
            // The node should be discarded.
            dropEvent.dropNode.parentNode.removeChild(dropEvent.dropNode, true);

            // The node has been discarded, return drop succeeded.
            dropEvent.dropStatus = true;
            return false;
        }
        return true;
    },  
    nodedragover: function (dragevent) {
        // If the node comes from the right tree, it is allowed to be dropped here.
        if (dragevent.source.tree.id !== dragevent.tree.id) {
            return true;
        }
        // A node from this tree is not allowed to be dropped.
        return false;
    }
}

The right tree is configured like this:

listeners:
{   
    beforenodedrop: function (dropEvent) {
        // Does this node come from the left tree?
        if (dropEvent.source.tree.id !== dropEvent.tree.id) {
            // The node should be cloned and inserted in the right tree.

            // Copy the node.
            var node = dropEvent.dropNode; // the node that was dropped
            var nodeCopy = new Ext.tree.TreeNode( // copy it
                Ext.apply({}, node.attributes)
            );
            // Match the id's.
            nodeCopy.id = Ext.id(null,'newnode') + '_' + node.id;

            // Find the right place to put it.
            if (dropEvent.target.parentNode === dropEvent.tree.getRootNode()) {
                // The node is placed on a folder, thus drop it there.
                dropEvent.target.appendChild(nodeCopy);
            } else {
                // The node is placed inside a folder, thus place it in there.
                dropEvent.target.parentNode.appendChild(nodeCopy);
            }

            // The node has been dropped, return okay and stop further process.
            dropEvent.dropStatus = true;
            return false;
        }           
        // Just use the normal builtin drag and drop.
        return true;
    }
}

Both trees has been set to enable Drag’n’Drop:

enableDD: true

All leaf nodes have the following configuration:

allowDrop: true,
draggable: true

All folders are set to:

allowDrop: true,
draggable: false

The conclusion is, that I have chosen to override some of the builtin drag’n’drop methods in the treepanel while still maintaining the builtin functionality.