Making an HTML element draggable.

Problem

How to add to an HTML element draggable feature and set custom drop and drag behavior if it needs?

Solution

To make an element draggable you can use one of the following ways:

  • Standard
    An easy way to set common drag and drop features. In most cases it's enough.
  • Custom
    Use it if you want to add your custom features to dnd behavior.
  • Interface-based
    You just need to inherit the appropriate interface. It's even easier than the standard way.

Standard dnd

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);
  • node - id or html node object.

The other - to add a zone which will be used as a drop target:

dhx.DragControl.addDrop(node);
  • node - id or html node object.

Custom dnd

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);
  • node - id or html node object.
  • ctrl - (optional) hash code of the drag control methods.
  • master_mode - (optional) flag which can be used if node in question has multiple inner areas, some of them can be used in DND and some not (see details here). Common for components, false for plain html nodes.

To add a zone which will be used as a drop target:

dhx.DragControl.addDrag(node, ctrl);
  • node - id or html node object.
  • ctrl - (optional) hash of the drag control methods.
  • master_mode - (optional) flag which can be used if node in question has multiple inner areas, some of them can be used in DND and some not (see details here). Common for components, false for plain html nodes.

Hash of the drag control methods

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:

  • onDragIn - defines marker's behavior within the drop area (If you want to deny drop area, return false).
  • onDragOut - defines marker's behavior out of the drop area.
  • onDrop - defines dropping behavior.

addDrag() related methods:

  • onDrag - defines dragging behavior.
  • onDragCreate - defines starting dnd behavior (if the function is defined it will return html node (not text ) which will be used as drag marker).
  • onDragDestroy - defines ending dnd behavior.
{
  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
}
  • s - source html object.
  • t - target html object.
  • e - native event.
  • source_master - control object related to source of dnd.
  • text - content of drag marker.

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.

DND masters

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

Interface-based dnd

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

  • dhx.Movable
    Low level interface. Component which inherits it can be moved by dnd. Depends on this._obj (click here to know how to inherit the interface).
  • dhx.DragItem
    High level interface. Adds dnd ability to component which uses StackRender (or similar) and DataStore (click here to know how to inherit the interface).

Context

Context object of dnd can be get as:

dhx.DragControl.getContext();

Mode details about context.