Different results from e.dropTarget

3 posts, 0 answers
  1. Tayger
    Tayger avatar
    118 posts
    Member since:
    Jan 2015

    Posted 06 Jul Link to this post

    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

     

  2. Ivan Danchev
    Admin
    Ivan Danchev avatar
    1268 posts

    Posted 07 Jul Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Tayger
    Tayger avatar
    118 posts
    Member since:
    Jan 2015

    Posted 07 Jul in reply to Ivan Danchev Link to this post

    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. 

Back to Top