Use ext JS technology to drag Tree nodes

 This article is original. If you need to reprint it, please indicate the author and the source. Thank you!

This article introducesTreepanelA very interesting feature of components: Drag and Drop nodes. To enableTreepanelThe node of the component can be easily dragged and dropped.TreepanelClassEnableddSet the option parameterTrueYou can. Of course, to implement more complex functions, other parameters and events must be used together.

I, Node Drag and Drop location

The drag-and-drop node contains two actions (Drag) And put (Drop). Drag is easy to understand, it is to drag the node up, drag which node is the same effect. However, adding nodes is complicated. Nodes can be divided into the following two situations:

• Append (Append) Node: If you place the dragged node on a non-leaf node,TreepanelThe component moves the node to a non-leaf node as the child node of the node. BecauseTreepanelThe leaf node cannotAppend.

• Move up and down at the same layer (AboveAndBelow): If you place the dragged node on the leaf node or on the side of a non-leaf node, the dragged node is placed as the sibling node.

The following settings willTreepanelSet the component as a node to be dragged.

Enter the following in the address bar of the browser: URL :
Http: // localhost: 8080/netdisk/tree/drapdrop.html
When the tree-like knots are displayed, drag the nodes according to the above drag method. 1 , Graph 2 And Graph 3 The drag effect shown in.

Figure 1 The ending point is a subnode of the computer.

Figure 2The node will act as the brother node of the computer and move it to the front of the computer node (AboveDrag and Drop

Figure 3Interaction between two leaf nodes (BelowDrag and Drop)
II,Enable leaf nodesAppend

By default,TreepanelSpecifying that leaf nodes are not allowedAppend. Whether this restriction is reasonable or unreasonableExtjsVersion compatibility, readers should try not to modifyExtjsOfSource code. But sometimes it needs to be on the leaf nodeAppend. In this case, we canTreepanelOfNodedragoverEvent.

TreepanelIt will be determined internally, if the node'sLeafThe parameter isTrue, This node is allowedAppend. UnderstandTreepanelForbidden NodeAppendIt is easy to passNodedragoverEvent to solve this problem.

InNodedragoverThere is a parameter in the event method.TargetProperties to obtain the target node where the drag node is placed. AndNodedragoverInLeafSet the property valueFalse,CodeAs follows:

Tree. On ( " Nodedragover " , Function (E ){
VaR Node = E.tar get;
If (Node. leaf)
Node. Leaf = False ;
Return True ;
});

Enter the following URL in the address bar of the browser:
Http: // localhost: 8080/netdisk/tree/leafappend.html
After the tree structure is displayed, drag a node to the leaf node and put it down. A child node is generated under the leaf node, and the leaf node icon becomes a non-leaf node icon, 4.

Figure 4Enable leaf nodesAppend

In addition, there are other ways to drag Tree nodes. For more information, seeFun for everyone: ext JS + Android + SSH integrated development of Web and mobile SNSRelated chapters of this book.