Tree has built-in support for internal/external drag-and-drop.
To enable drag-and-drop support for a tree, set the drag parameter to true:
Enabling drag-and-drop support for Tree
webix.ui({
view:"tree",
drag:true
});
Related sample: Enabling Drag-and-Drop in Tree
Tree has a special mode in which the dragged nodes are moved out. The "move" mode is enabled with drag:"move":
webix.ui({
view:"tree",
drag:"move"
});
Related sample: The 'move' DnD Mode
There is a one more special drag-and-drop mode - 'order'.
It works like the "move" mode, but items can't be dragged out of the tree container boundaries. Also, while dragging an item the remaining items are automatically rearranged, so that when you drop the item to the final destination the remaining items won't need any rearrangements.
To enable the drag-n-drop support and activate the 'order' mode, just set the drag parameter to order.
Activating the 'order' mode for items
webix.ui({
view:"tree",
drag:"order"
});
Related sample: The "order" Drag-and-Drop Mode
When you have several trees on the page, you may want to set specific tree(s) as the source of drag-n-drop (to drag items from) and specific tree(s) as the target of drag-n-drop (to drag items to).
Using the 'source-target' mode
//you can drag items only from treeA to treeB.
//Dragging within treeA is denied. Dragging from treeB to treeA is denied.
webix.ui({
id:"treeA",
view:"tree",
drag:"source"
});
webix.ui({
id:"treeB",
view:"tree",
drag:"target"
});
Related sample: Custom Dropping Behaviour
Information stated in the Common part is enough in most cases. The current part should be used just if you want to customize existing drag-and-drop behavior.
The part will describe the next things:
To redefine the text displaying for the dragging item(s), you should use the onBeforeDrag event.
The desired template is set through the context.html property.
You can use any HTML while specifying the value for the property.
Displaying a custom text for dragging items
treea.attachEvent("onBeforeDrag", function(context, ev){
context.html = " "+context.source.length+" item(s)";
});
Related sample: Custom Text of Dragged Items
To deny dragging specific items you can use the onBeforeDrag event and return false each time you want to block the operation.
Denying dragging even items
tree.attachEvent("onBeforeDrag", function(context, ev){
if (tree.getItem(context.source).$level == 2){
return true; // allows dragging items with the second nesting level
}
return false; // denies dragging in any other case
});
From now on, each time d-n-d is started, the item level will be checked, and the item can be dragged only if its level equal to 2.
To specify custom behavior for the 'drop' operation you can use the onBeforeDrop event.
Let's assume you want to specify the following behavior:
Custom dropping behavior
tree.attachEvent("onBeforeDrop", function(context, ev){
if (this.getItem(context.target).$count && this.getItem(context.target).open){
//drop as the first child
context.parent = context.target;
context.index = 0;
} else {
//drop as the next subling
context.index++;
}
});
Related sample: Custom Dropping Behaviour
Related sample: Custom Dropping Behaviour. Denying Dropping
In the default scenario there is no need to use any of the mentioned events, because Tree will process all the operations on its own. Use the events only when the default behavior needs customizing.
The following events are generated while d-n-d process:
Let's assume you have 2 same trees and drag an item from the 1st tree to the second one.
So, here is the order in which events are invoked in trees: