ExtJS+ASP.NET實現Tree節點的拖動(DragDrop)

摘要：本文介紹使用ExtJS和Asp.NET實現TreePanel的節點的拖動（Drag&Drop）。例如，拖動節點到另一父節點，插入某節點到另一節點之前/後。

ExtJS+ASP.NET實現Tree節點的拖動(DragDrop)是非常簡單的。

首先開啟TreePanel的允許DragDrop的選項:

 1: var tree = new Ext.tree.TreePanel({

 2:  

 3: …//此處省略

 4:  

 5: enableDD:true, //允許DragDrop

 6:  

 7: …//此處省略

 8:  

 9: })

定義事件：

 1: tree.on("dragdrop", treeDragDropHandler);

 2:  

 3: function treeDragDropHandler(t,node,dd,e){

 4: alert(node.id); //源節點id

 5: alert(node.parentNode.id); //目標父節點id

 6: alert(node.nextSibling ? node.nextSibling.id : ""); //下一個節點id，用於拖動插入某節點到另一節點之前/後

 7: alert(node.previousSibling ? node.previousSibling.id : ""); //前一個節點id，用於拖動插入某節點到另一節點之前/後

 8: //TODO: 此處添加操作，例如儲存拖動結果到資料庫等!

 9:  

 10: }

這樣就可以實現TreePanel的節點的拖動（Drag&Drop）。例如，拖動節點到另一父節點，插入某節點到另一節點之前/後。

• ExtJS+ASP.NET實現真實的進度條顯示伺服器端長時間操作的進度
• ExtJS+ASP.NET實現非同步Tree的節點搜尋和尋找下一個(FindNext)
• ExtJS+ASP.NET實現Tree節點的拖動(DragDrop)
• ExtJS+ASP.NET實現Grid到Tree的拖動(DragDrop)
• ExtJS之ASP.NET伺服器端實現ashx和asmx處理用戶端請求
• 使用YUI Compressor和DOS批處理指令碼壓縮JavaScript和CSS
• 最佳化JavaScript
• 區分JavaScript中的underfined,null和NaN