Required library edition:

These events occur when an item is dragged to another potential target (the event can be blocked) or out of the potential target (dhtmlxgrid 1.5.1 +).
onDragIn/onDragOut events pass the following parameters:

• dId - id of the dragged item;
• tId - id of the potential drop landing;
• sObj - source grid object;
• tObj - target grid object.

        grid.attachEvent("onDragIn", function(dId,tId,sObj,tObj){});
        grid.attachEvent("onDragOut", function(dId,tId,sObj,tObj){});
 

The event onDragIn returns: true - allows landing; false - denies landing. When item's dragging has started, the next situation that can be managed is the 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;w
• The landing must be enabled|disabled based on some rules (for example, allo 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's 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 that 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, using 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. the item can be dropped only in a 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 the TreeGrid, but it can be also used with some customization in case of the plain Grid as well.