Blog

Drag-and-Drop within Webix Widgets

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.

webix.ui({
    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:

webix.ui({
    view:"treetable",
    ..//treetable config
    multiselect:true,
    drag:true
})
multidrag

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:

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)
    }
}

where

  • source – the ID of the dragged item;
  • target – the ID of the drop target item.
onbeforedrop event

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.

Written by
The following two tabs change content below.
Olga Kustova

Olga Kustova

Front-end web developer fond of high-quality code and effective design. Is eager to share all the tips and tricks regarding Webix usage with wide audience.
Share on Google Plus Share on Twitter Share on Facebook Share on Stumbleupon Share on LinkedIn Bookmark on del.icio.us Vote on Reddit
  • Hello, thanks for the useful article. Where can I read about more complex DND operations?

  • AASHISH KUMAR

    How can I prevent drag and drop in webix Filemanager?
    tried -> drag:false
    it does not work :(