Here we speak about advanced drag-n-drop options and find solutions how to make any elements on the page draggable and control each stage of DnD.
For simple dragging and dropping of items within one and the same component as well as between different views and their instances - study the atricle about built-in Webix DnD options.
If you want to make some element on page draggable you can use
webix.DragControl.addDrag(node);
where node - id or html node object ( or object itself )
Related sample: Drag-and-Drop from HTML
If you want to define some area as drop target you can use
webix.DragControl.addDrop(node);
where node - id or html node object ( or object itself ).
If you want to control different aspects of dnd process, you can use the above methods but with an extra control parameter ($drag or $drop) with a custom function:
//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:
This is how you can set value of an input by drag-n-drop
webix.DragControl.addDrop("mytext", {
$drop:function(source, target, event){
var dnd = webix.DragControl.getContext();
target.value = dnd.from.getItem(dnd.source[0]).title; // setting source item title as input value
}
});
Related sample: Drag-and-Drop to HTML
Context object of dnd can be accessed as:
var state = webix.DragControl.getContext();
it is also available as parameter in all dnd related events
state = {
source:[1,2,3], //array of IDs for dragged elements
target:id, //ID of currently active target item
from:some_obj, // reference to the source object
to:some_obj, // reference to the target object
html:text //optional, custom text, which is rendered as drag-item
}
There are 6 DnD control event: 3 of them are used for dragged element (addDrag) and 3 - for drop target (addDrop). All these events can be used to define a custom behavior for elements included in current dra-n-drop.
addDrag() related events:
addDrop() related events:
{
onDragIn:function(source, target, event){ ... }, //drag moves in potential drop area
onDragOut:function(source, target, event){ ... }, //drag moves out from the drop area
onDrop:function(source, target, event){ ... }, //drag was released
onDrag:function(source, target, event){ ... }, //drag is started
onDragCreate:function(from, event){ ... } //dnd is started
onDragDestroy:function:(from, text){ ... } //dnd is finished
}
Where:
If any of onDrag handlers redefined - there won't be the default processing of the action, code expects that your custom handler will do all job.
Master is a component object or a hash code of the control methods. It specifies how element will behave itself in the drop target.
If you specify the master, it will answer for the appropriate dnd behavior. If you don't do it, the standard dnd 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);
You can make an element draggable by adding one of the 2 appropriate interfaces:
Low level interface. A component which inherits it can be moved by dnd (to learn how to inherit the interface read the Component Copying and Extending article).
High level interface. Adds dnd ability to component which uses DataStore (to learn how to inherit the interface read the Component Copying and Extending article).
<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;
});
<div id="data_container2" style="width:400px;height:396px;border:1px solid red;">
Drop some item here
</div>
webix.DragControl.addDrop("data_container2",{
onDrop:function(source, target, d, 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);
}
});
Back to top