Drag-n-Drop

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"});

Drag mode

There are three modes of drag-n-drop available in a tree:

• "target" - a tree takes items from other trees, while its items can't be dragged out of it
• "source" - a tree allows dragging its items out and can't take items from other trees
• "both" - a tree both takes items from other trees and allows dragging its items out as well

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

Drop behaviour

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:

• "child" - a dragged item becomes a child of the item it is dragged to

• "sibling" - a dragged item becomes a sibling of the item it is dragged to

• "complex" - a dragged item can become both a child or a sibling of a target item, depending on the position specified by highlighting (check the above images)

Copying dragged 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