Advanced

Advanced Drag-and-Drop

Here we speak about advanced drag-n-drop options and find solutions to make any elements on the page draggable as well as control each stage of drag-n-drop.

If your project requires basic functionality of d-n-d (e.g. moving items within one view or between multiple views) proceed to this article.

Drag-n-Drop Syntax

If you want to make some element on page draggable you can use the addDrag method:

webix.DragControl.addDrag(node);

Related sample: Drag-and-Drop from HTML

where node is the ID or an HTML node object (or an object itself).

If you want to define some area as a drop target, you can use the addDrop method:

webix.DragControl.addDrop(node);

where node - ID or HTML node object (or object itself).

Controlled Drag-n-Drop

If you want to control different aspects of the drag-n-drop process, you can use the above mentioned methods, but with an extra control parameter ($drag or $drop) that takes a function as its value:

// for dragging
webix.DragControl.addDrag(node, $drag:function(source, target, event){...});
 
// for dropping
webix.DragControl.addDrop(node, $drop:function(source, target, event){...});

The control function takes three parameters:

source - source HTML object
target - target HTML object
event - native event.

This is how you can set value of an input by dragging a record from a datatable:

webix.DragControl.addDrop("mytext", {
    $drop:function(source, target, event){
        var dnd = webix.DragControl.getContext();
 
        // setting the source item title as an input value
        target.value = dnd.from.getItem(dnd.source[0]).title; 
    }
});

Related sample: Drag-and-Drop to HTML

Drag-n-Drop Context

The context object of drag-n-drop can be accessed as:

var state = webix.DragControl.getContext();

It is also available as a parameter in all drag-n-drop related events:

state = {
    source:[1,2,3], // an array of IDs for dragged elements
    target:id, // the ID of currently active target item
    from:some_obj, // a reference to the source object
    to:some_obj, // a reference to the target object
    x_offset:some_number, // the left offset of the item
    y_offset:some_number, // the top offset of the item
    start:id // optional, the id of the first dragged item 
}

Drag control methods

There are several drag-n-drop control methods: some of them are used for a dragged element and others - for a drop target. All these events can be used to define a custom behavior for elements included in the current drag-n-drop flow:

Related events of the addDrag() method:

$drag - is called when an element is dragged
$dragCreate - is called at the moment when drag has been created
$dragDestroy - is called when drag has been completed.

Related events of the addDrop() method:

$dragIn - is called when the dragged element enters the drop area
$dragOut - is called when the dragged element leaves the drop area
$drop - fires when you drop the dragged element.

{
  $dragIn:function(source, target, event){ ... },   // drag moves in potential drop area
  $dragOut:function(source, target, event){ ... },  // drag moves out from the drop area
  $drop:function(source, target, event){ ... },   // drag was released
  $drag:function(source, target, event){ ... },   // drag is started
  $dragCreate:function(from, event){ ... }  // dnd is started
  $dragDestroy:function(from, html){ ... } // dnd is finished
}

Where:

source - the source HTML object
target - the target HTML object
event - the native event
from - the control object related to the source of dnd
html - the content of drag marker.

If any of onDrag handlers are redefined, there won't be the default processing of the action. The code expects that your custom handler will do all the job.

Drag-n-drop masters

Master is a component object or a hash code of the control methods. It specifies how an element will behave in the drop target.

If you specify the master, it will be responsible for the appropriate drag-n-drop behavior. If you don't do it, the standard drag-n-drop processing will occur.

For the methods, where source and target masters are not provided, you can get them by the getMaster method:

var source_master = webix.DragControl.getMaster(source);
var target_master = webix.DragControl.getMaster(target);

Interface-based Drag-n-drop

You can make an element draggable by adding one of the 2 following interfaces:

webix.Movable

Low-level interface. A component that inherits it can be moved by drag-n-drop (to learn how to inherit the interface, read the Component Copying and Extending article).

webix.DragItem

High-level interface. Adds drag-n-drop ability to component which uses DataStore (to learn how to inherit the interface, read the Component Copying and Extending article).

Use Cases

Drag from custom HTML

<div package="DragPackage" version="1.0" maintainer="Webix Team" 
    id="drag_1" 
    style='width:150px; height:50px; color:white; background-color:navy;'>
    Drag me into the dataview
</div>

webix.DragControl.addDrag("drag_1");
data1.attachEvent("onBeforeDrop",function(context){
    if (context.from == webix.DragControl){
        this.add({
            Package:context.source.getAttribute("package"),
            Version:context.source.getAttribute("version"),
            Maintainer:context.source.getAttribute("maintainer")
        }), this.getIndexById(context.target || this.getFirstId());
        return false;
    }
    return true;
});

Drag to custom HTML

<div id="data_container2" style="width:400px;height:396px;border:1px solid red;">
    Drop some item here
</div>

webix.DragControl.addDrop("data_container2",{
    $drop:function(source, target, e){
        var context = webix.DragControl.getContext();
        var item = context.from.getItem(context.source[0]);
 
        var d = document.createElement("DIV");
        d.innerHTML = item.Package+" - "+item.Version;
        target.appendChild(d);
    }
});