dhtmlxTree possesses an advanced drag-n-drop functionality. With this feature, it is possible to reorder items in a tree and drag items between trees. To enable drag-n-drop, you should define the drag mode.
var source = new dhx.Tree("tree-source",{dragMode:"source", dropBehaviour:"complex"});
var target = new dhx.Tree("tree-target",{dragMode:"target", dropBehaviour:"complex"});
There are three modes of drag-n-drop available in a tree:
By setting the drag mode, you automatically enable the drag-n-drop functionality.
var tree = new dhx.Tree("tree_container", {
dragMode:"source"
});
Related sample: Tree. Drag Modes
Please note that drag-n-drop within a tree works, if it has dragMode:"both" setting in its configuration object.
You can specify the drag-n-drop behaviour of tree items with the dropBehaviour in the configuration object of a tree.
There are three modes of behaviour of a dragged tree item:
Instead of moving a dragged item to a new position in the same or a different tree, you can copy it. Use the dragCopy option in the configuration object of a tree.
var treeSource = new dhx.Tree("tree-source", {dragMode: "source", dragCopy: true});
var treeTarget = new dhx.Tree("tree-target", {dragMode: "target", dragCopy: true});
Related sample: Tree. Copy Dragged Item
Back to top