position of drag and drop of a node
The drag-and-drop node contains two actions, drag (drag) and drop (drop). Drag very good understanding, is to drag the knot, drag the effect of which node is the same. But putting the knot is more complicated. The points can be divided into the following two kinds of situations:
Append (Append) node: If the dragged node is placed just above the non-leaf node, the Treepanel component will move the node to a node that is not a leaf node below it. Due to treepanel limitations, leaf nodes cannot be append.
Move up and down in the same layer (above and below): If the dragged node is placed on the leaf node or on the side of the Non leaf node, the drag node is placed as a sibling.
The following settings set the Treepanel component to a node-drag state.
In the browser address bar, enter the following URL:
Http://localhost:8080/netdisk/tree/drapdrop.html
When you display a tree node, drag the node by the drag method above, and the drag effect shown in Figure 1, figure 2, and Figure 3 appears.
Figure 1 "English" node as a child node of "computer"
Figure 2The English node is the sibling of the computer and moves to the front of the computer node (AboveDrag and drop
Figure 3Two leaf node interaction positions (BelowDrag and Drop)
second, make the leaf knot can append.
By default, Treepanel stipulates that leaf nodes do not allow append. Whether this restriction is reasonable or unreasonable, in order to maintain the compatibility of the ExtJS version, readers should try not to modify the ExtJS source code. But sometimes it is necessary to append on the leaf knot. So in this case, we can solve the problem by Treepanel the Nodedragover event.
Treepanel will allow the node to be append if the leaf parameter of the node is true. Understanding the principle of Treepanel prohibit node append, it is easy to solve this problem by Nodedragover event.
There is a parameter in the Nodedragover event method, which can obtain the target node where the drag node is placed. And in the Nodedragover method, set the Leaf property value of the node to false, the code is as follows:
Copy Code code as follows:
Tree.on ("Nodedragover", function (e) {
var node = E.target;
if (node.leaf)
Node.leaf=false;
return true;
});
In the browser address bar, enter the following URL:
Http://localhost:8080/netdisk/tree/leafappend.html
After displaying the tree structure, drag a node to the leaf node, and then drop it, will produce a child node under the leaf node, and the leaf node icon will become a non-leaf node icon, as shown in Figure 4.
Fig . 4 Make the leaf nodes can be append
In addition, there are other ways to drag the tree node, please see the content
"Everyone play happy Net: EXT JS+ANDROID+SSH integrated development of Web and mobile SNS," a book related chapters.
"Android /ophone Development Complete Handout (book copyright has been exported to Taiwan)
samples and catalog downloads
Interactive network Dangdang Excel Amazon
Everyone is happy: EXT JS+ANDROID+SSH integrated development web and mobile SNS "
sample Download
Interactive network
Lebo Android Phone client (Sina Weibo) publish
