Webix features the drag-and-drop functionality that is available not only for desktop but also for mobile devices.
The library allows making drag-and-drop operations within a widget itself as well as between a few different widgets or even between the same widgets. In this article it goes about drag-and-drop operations within Webix data management widgets.
Learn how to implement this functionality with ease.
Drag-and-drop modes
Firstly, make sure that both target and source widgets have the drag property set to true. Basically, it is enough to enable drag-and-drop.
view:"treetable",
..//treetable config
drag:true
})
In general, this property has several values to define the DND mode:
- drag:true – allows drag-and-drop within the component;
- drag:“order” – enables DND in the reorder mode;
- drag:“source” – enables one-side dragging items from the appropriate component;
- drag:“target” – enables dropping data to the component without an opportunity to drag data from it.
If you want to drag several items simultaneously, you can switch on multiple selection of widget items:
view:"treetable",
..//treetable config
multiselect:true,
drag:true
})
And now you can drag-and-drop several items at the same time. View the related sample.
Customizing Drag-and-Drop
In addition, you can control different aspects of drag-and-drop with the help of DND events.
DND can be represented as the sequence of certain events:
- select the necessary widget item,
- drag it to the desired position,
- drop the item by releasing the mouse button.
Thus, the widget with the drag-and-drop ability gets the folllowing events: onBeforeDrag, onBeforeDragIn, onBeforeDrop, onAfterDrop, onDragOut. You can define a custom function that will trigger one or another event.
Functions attached to these events have context object and native dnd event as arguments. Context features the following properties: from, to, source, target, start.
For instance, the onBeforeDrop event is used to make a copy of a dragged item when it’s dropped without changing its place:
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)
}
}
where
- source – the ID of the dragged item;
- target – the ID of the drop target item.
To understand the onBeforeDrop event better check this sample.
As you can see, there is nothing complicated in implementing drag-and-drop within Webix widgets.
If you want to learn about external drag-and-drop functionality, please read this article.
