Sorry but your example did not really resolve my problem. In your example the row (item) was moved to scheduler even if you didn't drop it inside of it. What I actually needed was just a simple way to drag the cloned element over any element on the page. I resolved my problem so it's ok now.
However I have another problem with drag and drop.. or it's a problem with grid itself.
When I try to drag items in the grid quickly.. the grid sometimes lags out abit and because of that the dragged item (row) is not actually the item (row) I wanted to move. For example I want to move row 2 to the 8th position. I "mousedown" on "drag-icon" of row 2 and start moving the mouse down to the 8th position.. now somehow the drag event triggers late and the row that I'm dragging is row 3 or row 4 (depends how late the event is I guess) and not row 2. I have made a video where I try to drag row "de" to another position and you can see that the grid totally lagged out and selected a row that was 3 positions up in the direction of my mouse movement. I will attach the video so you can understand the problem better.
Now what I think happens here... you don't trigger dnd event immediately after 'mousedown' event. Which is logical since you are waiting for user to start any movement to prevent unnecessary event triggering. Which leads to grid not selecting the right row to drag because it is selected when event happens.
What I think you should do... whenever the 'mousedown' event is triggered on the drag icon you should immediately say this is the row that will be moved if user makes any movement... so that dnd event already knows which row to move.
I hope you understand what I'm trying to say and provide some solutions. This problem gets even worse with more data in grid or worse computer with less resources. Maybe this is also a grid performance problem when it has lots of templates or something.. idk.