Drag-n-Drop within Webix Views

Basics of DnD

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.

Drag-and-Drop Modes

All the components you'd like to work with must have the drag property, both source and target components. In case of several instances of one and the same component, it would be enough to enable drag-and-drop. For adequate drag-and-drop between different components study external data functionality.

The property has several values to define the drag-and-drop mode:

• drag:true (default) - enables drag-n-drop within the component, allows taking items into its other instances and different components on the page;
• drag:"source" - enables dragging items from the component without an ability to drop data from other components;
• drag:"target" - enables dropping data to the component. It can take data from outside, but you cannot drag anything from it.
• drag:"order" - enables drag-n-drop in the reorder mode, allows dragging component items within one component thus changing their order;
• drag:"move" - enables drag-n-drop that allows to move out dragged nodes;
• drag:"inner" - is a simplified variation of "order", during which the dragged item does not reserve a place for itself and can be dragged outside the component borders;

Related sample:  Multi Drag-and-Drop in Tree

The multidrag mode (dragging of several items at a time is possible) is enabled by setting the multi selection ability within the component. You can use one of the following settings:

• multiselect:true - selection of several items regardless of their hierarchy;
• multiselect:"level" - selection of several items belonging to one and the same hierarchical level within the same tree branch.

Treetable Multidragging

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

Related sample:  List: Drag-and-Drop of items

Drag-and-Drop Context and Events

In essence, drag-n-drop is a set of sequential events: first you hook 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:

• onBeforeDrag - fires before drag-n-drop is started;
• onBeforeDrag - fires before the mouse button is pressed and the cursor is moved over a draggable item;
• onBeforeDragIn - fires before a dragged item is moved over the dropping area;
• onBeforeDrop - fires when the dragged item is moved over the dropping area;
• onAfterDrop - fires after the dropping has happened;
• onDragOut - fires when a dragged item moves out of the dropping area.

They are used to control the drag-n-drop 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:

• from - the source object;
• to - the target object;
• source - the ID of the dragged item(s);
• target - the ID of the drop target, null for drop on an empty space;
• start - the ID from which drag-n-drop was started.

For instance, the onBeforeDrop can be used to make a copy of 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 the drag-n-drop event system.

Drag-and-Drop - Advanced Level

• Defining Drag Handle - learn how to set a dragging handle to a component item;
• Defining Drag Marker - how to set a drag-n-drop message and mark the dropping area with color;
• DnD with Tree and TreeTable Components - how to observe hierarchy during drag-n-drop;
• DnD Between Different Components - how to use the externalData property while dragging an item from one component to another;

• Drag-and-Drop Events - how to use the drag-n-drop event system for custom drag-n-drop, 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 drag-n-drop;

• HTML5 Drag-n-Drop with Webix Views - how to use HTML5 drag-n-drop within the Webix library.

Back to top