In case of Tree and TreeTable where data is presented in a hierarchical way, it's vital to specify how tree nodes would be dragged between different levels.
By default, if a tree node is dragged into the branch of the same level as its parent, it becomes the first child of this branch. At the same time, if you drop lower-level nodes to the higher-level branches (the mouse is released over this higher-level node) the dragged node takes its level and become the previous child of this node.
In addition, if you drag-and-drop the tree branch it is moved together with its leaves.
Related sample: Basic Drag-and-Drop in Tree
Event handling within DnD can help you change dragging as well as dropping pattern.
For instance, if you want to prevent DnD on a top level items as well in leaf items, you should block it before the dragged element reaches the dropping area:
on:{
onBeforeDragIn:function(config, id){
if (!id) return false; // block dnd on top level
if (!this.getItem(id).$count) return false; // block dnd in leaf items
}}
Dropping process can be as well customized. To enable dropping of the nodes into a tree branch as its children you should state that the dropping target is a parent branch.
on:{
onBeforeDrop:function(context){
context.parent = context.target; //drop as child
context.index = -1; //as last child
}}
Related sample: Drag-and-Drop between Tree Nodes - Drop as Child
The position of a dropped item is set in the following way: the item becomes the first child if it is dropped over an opened tree branch; in other cases, e.g. the item is dropped over the leaves of a tree branch is takes the next position relative to the child it is dropped over:
on:{
onBeforeDrop:function(context){
if (this.getItem(context.target).$count && this.getItem(context.target).open){
// drop as first child if the item is dropped into an opened tree branch
context.parent = context.target;
context.index = 0;
} else {
// in other cases, the dropped item takes the next next position
context.index++;
}
}
}
Related sample: Drag-and-Drop in Tree - Drop Next