Dropped Draggables block other Draggables

[Mike]

I have a multi-point drag-and-drop scale, where 100 kendoDropTarget "ticks" span the width of the screen.

User drags kendoDraggable "tiles" and drops over the scale; tile is added to tick's drop zone.

The problem is when the user drags a new draggable and hovers over the recently-dropped draggable, the drop action for the underlying "tick" dropTarget is blocked. I need this action to NOT be blocked.

JSFIDDLE: http://jsfiddle.net/bsS2L/

[Petyo]

Hello Angelo,

when the draggable is dropped in the drop target, you append the element in it, effectively enlarging the drop target bounding box over its neighbors. I think that the best way to avoid this is to append the draggables in a container outside of the drop targets. Of course, the container z-index should be lower than the drop targets' one.

Regards,
Petyo
Telerik

 

 

[Mike]

Tried to no avail.

JSFIDDLE (http://jsfiddle.net/bsS2L/)

[Mike]

Oops. Here's the JSFiddle Updated link:

http://jsfiddle.net/bsS2L/1/

[Petyo]

Hello Angelo,

Pardon my short-sight; Indeed, this won't be the only necessary change. The scale should stay on top of the dropped elements, but at the same time they should be draggable even after being dropped. I fiddled a bit with your case and I think that this version works as you expect. 


Regards,
Petyo
Telerik

 

 

[Mike]

Works great! Thank you.