How to visually identify the drop target during drag and drop in Kendo Grid?

Question

I have a simple Kendo grid defined in this fiddle. I would like to drag and drop one row onto another. That part does work.

However, while I am dragging the row, I want highlight the row underneath the dragged one to indicate to the user that if they were to drop it here - this is the row that would be replaced.

To that end, I handle dragenter and dragleave events on the grid.table.kendoDropTarget. Unfortunately, it treats the entire grid as a drop target and only fires the event only once when I move the dragged item around the grid.

So my question is how to visual identify the row target of the drop during dragging operation.

Answer 1

It seems that you're getting the wrong element to highlight. If you log inside dragenter the text of the currentTarget - with $(e.draggable.currentTarget).find("td:first").text() - you will notice that it only shows the value of the first column of the row you are dragging. The correct element to highlight is e.dropTarget[0] that changes as you move the dragged row.

Just change - in both dragenter and dragleave - this line:

e.draggable.currentTarget.addClass("highlight-droparea");

To this line:

$(e.dropTarget[0]).addClass("highlight-droparea");

Fiddle.

UPDATE

I didn't realize that in the above snippet drag/drop works only once. Trying to find out the issue I noticed that after first drop all rows lost their draggable attributes. So I wrapped both kendoDraggable() and kendoDropTarget() into a function and then, inside kendoDropTarget.drop event I call it again, re-creating all draggable events for the rows.

Fiddle.

I know that it isn't so pretty and it may decrease performance in some cases but I'm don't really know any other way for doing this.