ExtJS TreePanel 節點跨樹拖放實戰：enableDrag 與 enableDrop 配置詳解

場景與核心配置

同樹內拖放：設置 enableDD: true。
**跨樹拖放**：源樹設置 enableDrag: true，目標樹設置 enableDrop: true。

完整代碼實現

Ext.onReady(function() {
    // 源樹：可拖出
    var tree1 = new Ext.tree.TreePanel({
        el: 'tree1',
        enableDrag: true,  // 關鍵：允許從此樹拖出節點
        loader: new Ext.tree.TreeLoader({dataUrl: 'treeData1.txt'})
    });

    // 目標樹：可放入
    var tree2 = new Ext.tree.TreePanel({
        el: 'tree2',
        enableDrop: true,  // 關鍵：允許向此樹放入節點
        loader: new Ext.tree.TreeLoader({dataUrl: 'treeData2.txt'})
    });

    var root1 = new Ext.tree.AsyncTreeNode({text: '根節點'});
    var root2 = new Ext.tree.AsyncTreeNode({text: '圖書'});

    tree1.setRootNode(root1);
    tree2.setRootNode(root2);
    tree1.render();
    tree2.render();
});

HTML 容器

數據文件 (JSON 格式)

treeData1.txt

[
    {text: '非葉子節點'},
    {text: '葉子節點', leaf: true}
]

treeData2.txt

[
    {text: '計算機', children: [
        {text: 'Java', children: [
            {text: 'Java核心技術', leaf: true},
            {text: 'Thinking in Java', leaf: true}
        ]},
        {text: '算法導論', leaf: true}
    ]},
    {text: '音樂', children: [
        {text: '樂理基礎', leaf: true},
        {text: '卡爾卡西古典吉他教程', leaf: true}
    ]}
]

效果演示

TreePanel - enableDrag 效果

進階配置與事件控制

• ddGroup：指定拖放分組，只有相同 group 的樹間才能拖放
• beforeDrop / beforeDrag 事件：攔截驗證（如禁止移動根節點、限制目標父節點類型）
• onDragDrop 事件：放置成功後業務邏輯（如保存新層級到後端）
• copy: true：拖放為複製而非移動（源樹節點保留）

完整事件示例

var tree2 = new Ext.tree.TreePanel({
    el: 'tree2',
    enableDrop: true,
    ddGroup: 'treeDD', // 分組隔離
    listeners: {
        beforedrop: function(e) {
            // 禁止拖放到葉子節點下
            if (e.target.isLeaf()) return false;
            // 禁止拖放根節點
            if (e.dropNode.isRoot()) return false;
            return true;
        },
        drop: function(e) {
            // 異步保存新父子關係
            Ext.Ajax.request({
                url: 'saveTreeMove.action',
                params: {nodeId: e.dropNode.id, newParentId: e.target.id}
            });
        }
    }
});

總結

ExtJS TreePanel 跨樹拖放核心在於 **源樹 enableDrag + 目標樹 enableDrop + 同 ddGroup**。配合事件鉤子實現業務校驗與持久化，構建直觀的樹結構管理界面。