Draggable always goes to the outermost sortable

Question

I'm trying to write a page where users can drag items into one of three nested, sortable UL. No matter where the user drops the draggable, it always lands on the outer(or topmost) UL. I've whipped up a simplified version that illustrates the problem on jsFiddle.

I am not able to target the ULs by id, as the ids are determined at runtime. Any help would be appreciated.

Answer 1

Javascript events bubble up. Since your sortables are contained inside eachother, the event is bubbling to your first(inner-most) sortable, then the event bubbles up to the second sortable, and so on until it is finally captured by the last(outer-most) sortable. You can prevent the event from bubbling further up by adding event.stopPropigation() into your sortable receive function.