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