This is a migrated thread and some comments may be shown as answers.

How to implement nested drop target?

4 Answers 321 Views

Drag and Drop

This is a migrated thread and some comments may be shown as answers.

Derick asked on 10 May 2012, 11:10 AM

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.

4 Answers, 1 is accepted

answered on 08 Jun 2012, 08:11 PM

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();