Wanted: Directions/ideas for a custom tree-to-tree drag'n'drop implementation in ExtJS

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.

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.