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

How to implement nested drop target?

4 Answers 124 Views
Drag and Drop
This is a migrated thread and some comments may be shown as answers.
Derick
Top achievements
Rank 1
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

Sort by
0
Petyo
Telerik team
answered on 10 May 2012, 02:09 PM
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!
0
Mike
Top achievements
Rank 1
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();
0
Petyo
Telerik team
answered on 11 Jun 2012, 07:00 AM
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!
0
Nohinn
Top achievements
Rank 1
answered on 07 Aug 2012, 03:08 PM
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.
Tags
Drag and Drop
Asked by
Derick
Top achievements
Rank 1
Answers by
Petyo
Telerik team
Mike
Top achievements
Rank 1
Nohinn
Top achievements
Rank 1
Share this question
or