DHTMLX Docs & Samples Explorer

Common details

Existing Events Order

The next events are generated in the course of d-n-d process :

  • onBeforeDrag Event - event occurs when drag operation is started; the event can be blocked (dhtmlxgrid 1.5.1 +);
  • onDragIn Event - event occurs when an item is dragged to another potential target, the event can be blocked;
  • onDragOut Event - event occurs when an item is dragged out from the potential target (dhtmlxgrid 1.5.1 +);
  • onDrag Event - event occurs when an item is dragged to another target and the mouse is released, the event can be blocked;
  • onDrop Event - event occurs when d-n-d operation is finished.

In the default scenario there is no need to use any of the mentioned events, because the grid will process all the operations on its own. But sometimes default behavior needs to be customized - this is the time when the mentioned events can be used.

Receiving Final Info about d-n-d

The last event - onDrop Event - occurs when an item is already placed in its final position. It can be used to catch the moment when the operation is finished.
The first parameter of onDrop event is item's ID after moving (in case of “copy” behavior it will differ from original item's ID).
This event can be used to save the data or to update some other UI based on d-n-d results.

Some Details about d-n-d API

In case when d-n-d process occurs in TreeGrid it is possible to select one of the following behaviors (by setDragBehavior):

  • child - the item is dropped as a child of the target item;
  • sibling - the item is dropped as a sibling of the target item; if drop occurs between the parent and the child elements, the item is moved on the parent level;
  • complex - the item is dropped as a sibling or a child depending on the position of the target item towards the landing; if drop occurs between the parent and the child elements, the item is moved on the parent level;
  • sibling-next - the item is dropped as a sibling of the target; if drop occurs between the parent and the child elements, the item is moved on the child level;
  • complex-next - the item is dropped as a sibling or a child depending on the position of the target item towards the landing; if drop occurs between the parent and the child elements, the item is moved on the child level.

Drag as copy for all the elements can be enabled by enableMercyDrag command.