In this article you know how to add to an HTML element draggable feature and set custom drop and drag behavior if you need.
To make an element draggable you can use one of the following ways:
If you want to set standard dnd you will need just 2 methods.
The first one is used to make an element draggable:
dhx.DragControl.addDrag(node);
The other - to add a zone which will be used as a drop target:
dhx.DragControl.addDrop(node);
For custom dnd we will use the same methods but with two more parameters.
To make an element draggable:
dhx.DragControl.addDrop(node, ctrl, master_mode);
To add a zone which will be used as a drop target:
dhx.DragControl.addDrag(node, ctrl);
There are 6 control methods: 3 of them have sense if draggable element is specified (addDrag() function) and 3 - if drop target (addDrag() function).
All of these methods have default values and you need to redefine them just if you want to set the custom behavior.
addDrop() related methods:
addDrag() related methods:
{ top:5, //position of drag marker relative to mouse cursor left:5, onDragIn:function(s,t,e){ ... }, //drag moves in potential drop area onDragOut:function(s,t,e){ ... }, //drag moves out from the drop area onDrop:function(s,t,e){ ... }, //drag was released onDrag:function(s,t,e){ ... }, //drag is started onDragCreate(source_master, e) //dnd is started onDragDestroy(source_master, text) //dnd is finished }
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 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 - the standard dnd processing will occur. For methods where source and target masters not provided you can get them by:
var source_master = dhx.DragControl.getMaster(s); var target_master = dhx.DragControl.getMaster(t);
You can make an element draggable by adding one of 2 appropriate interfaces: