需求：Ext JS中自定义树到树拖放实现的方向/想法


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

我需要一些有关ExtJS中两棵树之间拖放的组合功能。

第一个必需的功能非常简单，只是将内置拖放功能仅隔离到一棵树上。

Standard

第二个必需的功能是我不希望用户能够从左侧树中拖出一个节点并将其拖放到右侧树中的任何节点上。

One

该操作不应从左侧树中删除该节点，从而有可能将同一节点从左侧树中拖动到右侧树中的多个位置。

我的问题是：我应该采用哪种方法来结合这两个功能，利用TreePanel对象中的现有可能性，而无需再次发明轮子呢？我不是在寻找一个完整的解决方案(虽然;;)会很不错)，而是在如何处理拖放区，事件等。

好的。我已经考虑了一段时间，以下方法似乎对我有用：)

我已将左侧树配置为：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
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;
    }
}

右树的配置如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
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;
    }
}

两棵树均已设置为启用Drag \\'n \\'Drop：

1
enableDD: true

所有叶节点都具有以下配置：

1
2
allowDrop: true,
draggable: true

所有文件夹均设置为：

1
2
allowDrop: true,
draggable: false

结论是，我选择重写树面板中的某些内置拖放方法，同时仍保持内置功能。