DHTMLX Docs & Samples Explorer

onDrag Event

This event occurs when an item is dragged to another target and the mouse is released, the event can be blocked. onDrag event passes the following parameters:

  • sId - id of the source item;
  • tId - id of the target item;
  • sObj - source grid object;
  • tObj - target grid object;
  • sInd - index of the column from which drag started;
  • tInd - index of the column in which drop occurs.
 
          grid.attachEvent("onDrag", function(sId,tId,sObj,tObj,sInd,tInd){});
 
 

This event returns: true - confirms drag-and-drop; false - denies drag-and-drop.

When the item was dragged and dropped, the next stage of the process is initiated - the item needs to be correctly inserted in its new place. And again, there is no need to do anything, but default existing logic that will process operation on its own. But in some cases, the user should customize the operation:

  • Blocking drag-and-drop operation
        grid.attachEvent("onDrag",function(sid,tid){
            if (!some_check(sid,tid)) return false; // block drag-and-drop
            return true;
        });
 
  • Dynamical Switching between Move and Copy Behaviors
        grid.attachEvent("onDrag",function(sid,tid){
            if (!some_check(sid,tid)) grid.dragContext.mode="copy"; // copy the item instead of moving it
            return true;
        });
 

The dragContext object is available during onDrag event and it contains the following properties:

  • dragContext.source - type of the source component (“tree”,”grid”,”treeGrid”);
  • dragContext.target - type of the target component;
  • dragContext.sobj - the source object;
  • dragContext.tobj - the target object;
  • dragContext.dropmode - whether the dragged item will be a “child” or a “sibling”;
  • dragConetxt.mode - whether the dragged item will be copied or just moved: “copy” or “move”;
  • dragContext.sid - id of the dragged item;
  • dragContext.tid - id of the drag landing item;

Any of these properties can be changed, and further dragging process will use the changed value instead of the original one:

  • Some custom functionality instead of moving an item
        grid.attachEvent("onDrag",function(sid,tid){
            some_custom_code(sid,tid);
            return false;
        });
 
  • Moving an item with some specific rules
        grid.attachEvent("onDrag",function(sid,tid){
            grid.moveRowTo(sid,someID,"copy","sibling"); // moving an item as a sibling of some other element
            return false; // block default drag-and-drop
        });