ExtJS 拖放技術實戰：DragSource 拖動到 DDTarget 指定區域

ExtJS 拖放體系

所有拖放組件繼承 Ext.dd.DragDrop：

• 拖動源：DD、DDProxy、DragSource、DragZone
• 放置目標：DDTarget、DropZone

核心機制：group 參數匹配，同組內源目標可交互。

完整示例：DragSource → DDTarget

這是一個拖動塊，也可用 DD、DDProxy、DragZone 創建



這裡是放置區域 DDTarget，也可用 DropZone 創建

關鍵 API 說明

進階：DragSource 完整事件鉤子

var dragSource = new Ext.dd.DragSource('element-id', {group: 'myGroup'});
dragSource.onDragStart = function() { console.log('開始拖動'); };
dragSource.onDragEnter = function(target, e) { target.el.addClass('drop-ok'); };
dragSource.onDragOut = function(target, e) { target.el.removeClass('drop-ok'); };
dragSource.onDragDrop = function(target, e) { console.log('放置到目標'); };
dragSource.onInvalidDrop = function(e) { console.log('無效放置'); };
dragSource.afterDragDrop = function(target, e, id) { console.log('放置完成'); };

DDTarget 完整事件鉤子

var dropTarget = new Ext.dd.DDTarget('target-id', 'myGroup');
dropTarget.notifyEnter = function(source, e, data) { this.el.highlight(); return true; };
dropTarget.notifyOver = function(source, e, data) { return this.dropAllowed; }; // 返回 CSS 類
dropTarget.notifyOut = function(source, e, data) { this.el.unhighlight(); };
dropTarget.notifyDrop = function(source, e, data) {
    // 處理放置業務邏輯
    return true; // 返回 true 表示放置成功
};

最佳實踐

• group 隔離：不同功能區域使用不同 group，避免誤觸發
• 視覺反饋：notifyOver 返回 this.dropAllowed/this.dropNotAllowed 顯示綠/紅邊框
• 代理模式：複雜 DOM 結構拖動用 DDProxy，性能更好
• 容器級拖放：Tree/Grid 節點拖放用 DragZone/DropZone，實現模板方法

總結

ExtJS 拖放核心在於 DragDrop 子類、group 匹配、事件鉤子鏈。DragSource + DDTarget 實現基礎元素拖放；DragZone + DropZone 支撐複雜容器節點拖放。掌握事件生命週期，即可構建豐富交互體驗。

1. 上一篇文章： Session 劫持攻擊原理與防禦深度解析
2. 下一篇文章： Java 遞歸刪除目錄完整實戰代碼

Java 相關知識

Windows Server 2003 下 Tomcat 控制台輸出卡住問題：快速編輯模式導致線程阻塞

現象：Windows Server 2003 運行 Tomc

精通 Eclipse 3.4：JDT 核心功能與開發技巧全解析

Eclipse Java Development Tools

Java 解析配置文件路徑問題深度解析與最佳實踐

前言 在 Java 開發中，正確載入類路徑下的配置文件（如

Java 安全模型演進與 AccessController 實戰：從沙箱到特權動作的完整解析

Java 安全模型歷代演進 Java 誕生於網絡時代，安全是