Extjs + ASP. NET implement tree node dragging (dragdrop)

Abstract: This article describes how to use extjs and ASP. NET to drag a node of treepanel (Drag & drop ). For example, drag a node to another parent node and insert it before/after it.

Extjs + ASP. NET implement tree node drag (dragdrop) is very simple.

First, enable the options of treepanel to allow dragdrop:

 
1: VaRTree =NewExt. Tree. treepanel ({
 

2:
 

 
3:...// Omitted here
 

4:
 

 
5:Enabledd:True,// Allow dragdrop
 

6:
 

 
7:...// Omitted here
 

8:
 

 
9:})
 

Define events:

1:Tree. On ("Dragdrop", Treedragdrophandler );
 

 
2:
 

3: FunctionTreedragdrophandler (T, node, DD, e ){
 

 
4:Alert (node. ID );// Source node ID
 

  5:  alert (node. parentnode. ID);  // target parent node id  

  6:  alert (node. nextsibling? Node. nextsibling. ID:  "" );  // the ID of the next node, used to drag a node before/after it is inserted to another node  

  7:  alert (node. previussibling? Node. previussibling. ID:  "" );  // ID of the previous node, used to drag a node before/after it is inserted to another node  

8: // Todo: Add operations here, such as saving the drag result to the database!
 

 
9:
 

10:}
 

In this way, you can drag the treepanel node (Drag & drop ). For example, drag a node to another parent node and insert it before/after it.

• Extjs + ASP. NET implements a real progress bar to display the progress of the server's long-term operations
• Extjs + ASP. NET Implement Asynchronous Tree node search and find next (findnext)
• Extjs + ASP. NET implement tree node dragging (dragdrop)
• Extjs + ASP. NET implement the drag from grid to tree (dragdrop)
• Extjs ASP. NET Server Side implements ashx and asmx to process client requests
• Use Yui compressor and DOS batch processing scripts to compress JavaScript and CSS
• Optimize Javascript
• Distinguish underfined, null, and Nan in Javascript