Here we speak about simple drag and drop of items within one and the same component as well as between different views and their instances. The information about how to make any app element draggable is to be found in the dedicated article of the documentation.
All the components you'd like to work with must have drag property, both source and target components. In case of several instances of one and the same component, it would be enough to enable DnD. For adequate DnD between different components study external data functionality.
The property has several values to define DnD mode:
Mutlidrag mode (dragging of several items at a time is possible) is enabled by setting multi selection ability within the component.
Multi Selection:
Treetable Multidragging
webix.ui({
view:"treetable",
..//treetable config
multiselect:true,
drag:true
})
Related sample: Multi Drag-and-Drop between Trees
Related sample: DnD with List Items
In essence, DnD is a a set of sequential events: first you hook on the necessary component item, then drag it to the desired position and drop the item releasing the mouse button.
Therefore, the component with draggable items as well as the one with a dropping ability, gets the following events:
They are used to control the DnD process and customize it on different stages since any event can trigger any custom function you'd like to associate this event with.
Functions attached to these events have context and native event as arguments.
Native event is a DOM event that happens during drag-and-drop while context is an object with the following properties:
For instance, the onBeforeDrop can be used to make a copy a dragged item the moment it's dropped while not changing its place at all:
view:"datatable",
drag:true,
on:{
onBeforeDrop:function(context, e){
this.getItem(context.target).title = context.source.innerHTML; //copying
this.refresh(context.target);
return false; //block the default behavior of event (cancels dropping)
}
}
Related sample: Drag-and-Drop from HTML
More about the possibilities of DnD event system
Drag-and-Drop Events - how to use DnD event system for custom DnD, e.g. copying items with drag-and-drop;
On-Page Drag-n-Drop (Advanced Level) - how to make any Webix view or HTML node on the page draggable and control every aspect of DnD;