Different results from e.dropTarget

[Tayger]

Hello 

On dragging items inside a KendoUI treeview I need to know (while dragging) what the parent is of the dropTarget. Depending on that I will set the statusClass (whether its allowed to drop the dragged item or not).

The problem I run into is the fact, that e.dropTarget can return 2 different elements on statusClass insert-middle, insert-up and insert-down.

The first return element looks ok to me:

<span class="k-in">Entry 2</span>

The second one returns a DIV with no relation to where the dragged element will be dropped:

<div class="k-i-drag-and-drop" style="visibility: visible; top: 81px; left: 16px;">
  ::before
</div>

With this DIV element I have no relation to where the dragged element will be dropped and therefore I can't set the statusClass properly.

The attached file shows a simple example of a treeview with 3 items. Drag the third element between the first and second item. The console output will show you the above described output elements while smoothly drag the third element between the first and second item. Same problem on dragging to insert-up and insert-down areas.

Is there a way to ensure I always get a tree item element back?

Regards

 

[Ivan Danchev]

Hello Tayger,

The span with class "k-in" is holds the node's text, for example:

<span class="k-in">Entry 2</span>

The div element with class "k-i-drag-and-drop" which is rendered when dragging a node between other nodes is placed within the hovered node, either before the span posted above or after it. So if you hover this div while dragging and want to know which node it belongs to you can get the node's "k-in" span as shown below:

drag: function(e) {
    console.log (e.statusClass);
    if($(e.dropTarget).hasClass("k-i-drag-and-drop")) {
      console.log ($(e.dropTarget).parent().find(".k-in")[0]);
    }
    else {
      console.log ( e.dropTarget);
    }
}

Regards,
Ivan Danchev
Progress Telerik

[Tayger]

Hi Ivan

Excellent answer, so obvious (after reading)thank you! I will implement this for a proper solution even I realised that on entering the area where the drag div is it always hits first the span with a proper element. Just reacting on the span and ignoring the div looks also like a proper working way.