DnD event system allows you to customize the process of drag-and-drop and adjust it to your needs.
Basically, drag-and-drop of component items means that you remove an item from one component and place it to the other one. Still if needed, you can copy items with DnD by actually leaving a dragged item in the source component and making its copy in the target one.
For these needs, we refer to the onBeforeDrop event and associate a copying function with it. Also, we make use of source and from properties of the DnD context object.
gridb.attachEvent("onBeforeDrop", function(context, ev){
for (var i=0; i< context.source.length; i++){
context.from.copy(context.source[i],context.start,this,webix.uid());
}
return false;
});
Here we copy each item (that is dragged) from the source object with the help of the dedicated function. It takes the following arguments:
In case of datatable, the whole rows can be dragged to other components as well as moved between datatable instances.
By default, the whole row is displayed while being dragged, which is not always convenient and pleasant to see. Sometimes, it would be enough to display the value of the main column during DnD. The same happends with dataview and list, the components that feature several template values in each item.
Here, the onBeforeDrag event is needed as the functionality should be enabled as soon as we hook on the necessary item. Also, as above, we take source and from properties from the DnD context object.
grida.attachEvent("onBeforeDrag", function(context, ev){
context.html = "<div style='padding:8px;'>";
for (var i=0; i< context.source.length; i++){
context.html += context.from.getItem(context.source[i]).title + "<br>" ;
}
context.html += "</div>";
});
Here we create a div container for the DnD context item and define 8-px padding for it. Then, with each of the dragged items from the source we take a title value from the dataset and close a div container.
Related sample: Using events for customizing dnd