How to implement nested drop target?

5 posts, 0 answers
  1. Derick
    Derick avatar
    3 posts
    Member since:
    Oct 2010

    Posted 10 May 2012 Link to this post

    I cannot implement nested drop target. For example, I have 2 types of elements, control and container. Both of them are draggable, and container is drop target.

    <div id="control">control</div>

    <div id=
    "base" style="width:600; height:400">
    <div id="container1" style="width:200; height:100"></div>
    <div id="container2" style="width:200; height:100"></div>
    </div>

    <script> 
    $(document).ready(function() {
    $("#control","#container1","#container2").kendoDraggable({
    hint: function(e) { return e.clone();}
    });

    $(
    "#base","#container1","#container2").kendoDropTarget({
    drop: function(e) { this.element.append(e.draggable.currentTarget.clone()); }
    });
    });
    </script>

    Whenever I drop the control to "base" or "container1" or "container2", the drop event was only triggered by "base" only. Can I trigger the drop event in "container1" if I drop the control into it?

    Thank you.


  2. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 10 May 2012 Link to this post

    Hi,

    At present, there is a glitch that does not allow the usage of nested drop targets. It will be resolved in our upcoming service pack. 

    Regards,
    Petyo
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Angelo
    Angelo avatar
    32 posts
    Member since:
    Nov 2011

    Posted 08 Jun 2012 Link to this post

    Was this fix included in the mid-May update? If so, is there an example on how it's implemented, if it's any different, that is?

    The scenario I have is that users can drag pre-defined layouts into a droppable, then that droppable is formatted to the selected layout. Finally, each cell within the layout needs to be a droppable so that users can nest their layouts to their hearts' content.

    Users can also clear their work area, and then I would need to re-enable the original droppable.

    I can wait for the nested droppable fix if I can simply say something like:
    $("#droppable").data("kendoDroppable").disable();
    and consequently:
    $("#droppable").data("kendoDroppable").enable();
  5. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 11 Jun 2012 Link to this post

    Hello,

    Unfortunately, the update did not make it in the service pack. However, nested drop targets function correctly if declared the inside one first. 

    Please see this fiddle for example.

    All the best,
    Petyo
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Nohinn
    Nohinn avatar
    167 posts
    Member since:
    Feb 2011

    Posted 07 Aug 2012 Link to this post

    Is the glitch fixed already?
    I'm trying to do a little designer, and the user can draw some boxes and put items (or more boxes) inside, so I cannot (at first) use the workaround of declaring first the inner droppable area.
Back to Top
Kendo UI is VS 2017 Ready