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
tree = new webix.ui({
view:"tree",
...
drag:true
})
Related sample: Enabling Drag-and-drop in Tree
There is a special drag-and-drop mode - 'order'.
In such a mode, 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 to do any rearrangements.
To enable the d-n-d 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' DnD Mode
When you have several trees on the page, you may want to set specific tree(s) as the source of dnd (to drag items from) and specific tree(s) as the target of dnd (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.
treeA = new webix.ui({
view:"tree",
...
drag:"source"
});
treeB = new webix.ui({
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 behaviour.
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 the Dragging 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 2nd 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 behaviour for the 'drop' operation you can use the onBeforeDrop event.
Let's assume you want to specify the following behaviour:
Custom dropping behaviour
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 2nd one.
So, here is the order in which events are invoked in trees: