DHTMLX Docs & Samples Explorer

Control Drag Start

A very common use case is as follows: only specified items can be dragged. This can be implemented by using onBeforeDrag event. In xml we 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 we 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 cases
  }

From now on each time d-n-d is started, user data of the dragged item will be checked, and d-n-d 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 dragging.