After the item's dragging has started, the next situation which can be managed - reaction of the drag landing on the dragged item. There are two common use cases:

• The landing must show some special reaction on the dragged item;
• The landing must be enabled|disabled based on some rules (e.g. allow to drag A in B, but deny drag B in A).

To add some custom visualization to the dragged item's landing onDragIn and onDragOut events may be used in the following way:

  var last_marker = null;
  grid.attachEvent("onDragIn",function(sid,tid,sgrid,tgrid){
      // sid - id of dragged item , tid - id of landing item
      if (tid)                                                                     // tid may be null if landing is in grid body
          grid.setRowTextStyle(tid,"background-color:red;");    // mark current landing
      return true;                                                           // mandatory! important!
  })
  grid.attachEvent("onDragOut",function(tid){
      if (tid)
          grid.setRowTextStyle(tid,""); // clear styles which were set on the previous step
  })

This snippet will be called each time when any item is dragged. It sets background color to red when the dragged item enters the borders of any possible landing, and clears background color after the item is moved outside landing's borders. Of course, in a real application another neater visualization can be used.

To enable|disable landing - onDragIn event is just enough. For example, we have the following XML:

  <rows>
      <row id="1"><cell> data 1 </cell>
          <userdata name="drag">category</userdata></row>
      <row id="2"><cell> data 2</cell>
          <userdata name="drag">category</userdata></row>
      <row id="3"><cell> data 3</cell>
          <userdata name="drag">item</userdata></row>
      <row id="4"><cell> data 4</cell>
          <userdata name="drag">item</userdata></row>
  </rows>

We can implement “category” and “item” logic (i.e. item can be dropped only in category) in the following way:

  grid.attachEvent("onDragIn",function(sid,tid){
       if (grid.getUserData(tid,"drag")=="item") return false; // nothing can be dropped in an item, block landing
       return true;                                                       // in any other cases - allow landing
  });

To block the operation we just return “false” from onDragIn event. The described scenario has more sense for TreeGrid, but it can be also used with some customization in case of plain Grid as well.