Drag tree node implemented using ExtJS technology_extjs

1. Drag-and-drop position of the node
Drag-and-drop the node includes two actions, drag and drop. Dragging is easy to understand, it means dragging a node up, and the effect will be the same no matter which node you drag. However, placing nodes is more complicated. Placing nodes can be divided into the following two situations:

Append node: If the dragged node is placed exactly on top of a non-leaf node, the TreePanel component will move the node to The following non-leaf nodes are the child nodes of that node. Due to the limitations of TreePanel, leaf nodes cannot be appended.
Move up and down on the same layer (above and below): If you place the dragged node on a leaf node, or on the side of a non-leaf node, the dragged node will be treated as a sibling node. place.
The following settings set the TreePanel component to a draggable state.

Enter the following URL in the browser address bar:
http://localhost:8080/netdisk/tree/drapdrop.html
When the tree node is displayed, press the above Use the drag method to drag the node, and the drag effect will appear as shown in Figure 1, Figure 2 and Figure 3.

Figure 1 [English] The node will be the child node of [Computer]

Figure 2 The [English] node will be the sibling node of [Computer] and moved to the front of the [Computer] node (abovedrag and drop

Figure 3 Interaction position of two leaf nodes (belowdrag and drop)
2. Enable leaf nodes to be appended

By default, TreePanel stipulates that leaf nodes are not allowed to be appended. Regardless of whether this restriction is reasonable or unreasonable, in order to maintain the compatibility of the ExtJS version, readers should try not to modify it. ExtJS source code. However, sometimes it is necessary to append on the leaf node. In this case, we can solve it through TreePanel's nodedragover event.
TreePanel will determine internally if the node's leaf parameter is true. The node append will be allowed. After understanding the principle of TreePanel prohibiting node append, it is easy to solve this problem through the nodedragover event.
There is a parameter in the nodedragover event method, which can be obtained through the target attribute of the parameter value. Drag the target node where the node is placed and set the leaf attribute value of the node to false in the nodedragover method. The code is as follows:

Copy code The code is as follows:

tree.on("nodedragover", function(e){
var node = e.target;
if(node.leaf)
node.leaf=false;
return true;
});

Enter the following URL in the browser address bar:
http://localhost:8080/netdisk/tree/leafappend.html
After displaying the tree structure, drag a node to a leaf node, and then drop it, a child node will be generated under the leaf node, and the icon of the leaf node will change to the icon of a non-leaf node, as shown in Figure 4.

Figure 4 enables leaf nodes to append

In addition, there are other tree nodes For the drag method, please refer to the relevant chapters of the book
"Everyone Plays Happy Net: Ext JS Android SSH Integrated Development of Web and Mobile SNS" .

"Complete Lecture Notes on Android/OPhone Development" (the copyright of this book has been exported to Taiwan)

Sample chapter and table of contents download
Interactive Network Dangdang.com Excellent Amazon

"Everyone has fun with Happy Net: Integrating Ext JS Android SSH to develop Web and mobile SNS"
Sample chapter download
Interactive Network

Lebo Android mobile client (Sina Weibo) Publish