jquery-ui sortable: elements dragged behind when using multiple sortables

Question

I have a series of nested sortable elements exhibiting some strange behaviour with z-indexes.

Basically, on some occasions elements are dragged behing the parent containers. It appears only after parent element has been sorted.

It also looks like the behind problem is only on elements further down the list. So I can drag to a "higher" sortable, but dragging to a "lower" sortable and the drag element is suddenly behind.

Details:

Given sortable list A each element in A in turns contains a connect sortable list B (as in the B lists in each A are all connected)

After sorting an element in A, elements dragged from the sortable living in this list are now behind the other A elements.

I have played around with the various z-index options via both CSS and Jquery to no avail.

Answer 1

I found a workaround for this problem.

When defining your sortables, use:

appendTo: "body"
helper: "clone"

This breaks the dragged elements totally out of the nested sortable z-ordering and solves the problem.