DHTMLX Docs & Samples Explorer

onBeforeDrag

This event occurs when drag operation starts; the event can be blocked (dhtmlxgrid 1.5.1 +). onBeforeDrag event passes the following parameter:

  • id - id of the dragged row.
 
        grid.attachEvent("onBeforeDrag", function(id){});
 
 

This event returns: true - confirms drag-and-drop; false - denies drag-and-drop (operation will not start); any other text value - used as visual representation of the dragged row. A very common use case is as follows: only specified items can be dragged. This can be implemented by using onBeforeDrag event. In the XML the user can mark items that can be dragged in any possible way. In the following snippet, it is marked by user data:

    <rows>
        <row id="1"><cell> data 2 </cell></row>
        <row id="2"><cell> data 2 </cell>
            <userdata name="drag">allow</userdata>
        </row>
    </rows>
 

After that, the user can add the following code to grid initialization:

        grid.attachEvent("onBeforeDrag",function(id){
            if (grid.getUserData(id,"drag")=="allow") return true;        // allow drag if user data exists
            return false;                                                            // deny drag for any other case
        }
 

From now on, each time drag-and-drop starts, user data of the dragged item will be checked, and drag-and-drop will be allowed only if it is set in XML. Of course, it is possible to use any other kind of check here, that will return true to allow dragging and false to deny it.