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

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

Basically, on some o开发者_如何学Cccasions 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.

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.

I know this is an old thread but I had a slightly different solution. After apending it to the body my element lost all of it's CSS properties. My workaround was creating my own custom helper object.

Javascript:

    appendTo: 'body',        
    helper: function(event, $item){
       var $helper = $('<ul class = "styled" id="' + event.originalEvent.target.id + '"><li>' + event.originalEvent.target.innerText + '</li></ul>');
       return $helper; 
    },

CSS

 .styled li{
      margin-left: 0px;
 }
 .styled{
      cursor:move;
      text-align:left;
      margin-left: 0px;
      padding: 5px;
      font-size: 1.2em;
      width: 390px;
      border: 1px solid lightGrey;
      background: #E6E6E6 url(https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/smoothness/images/ui-bg_glass_75_e6e6e6_1x400.png) 50% 50% repeat-
      font-weight: normal;
      color: #555;
      list-style-type: none;
 }

Pretty late response, but for anybody who follows in the future I have found that if you are moving multiple elements, you can override the sort and stop functions to set the elements' z-index. For example:

sort: function(event, ui) {
    $(this).css('z-index', 1000);
},
stop: function(event, ui) {
    $(this).css('z-index', 0);
}

This would update the current element's z-index property assuring that it is always on top. You could therefore extend this idea to grouped elements. Imagine:

sort: function(event, ui) {
    $('.element-group').each(function(index) {
        $(this).css('z-index', 1000);
    });
},
stop: function(event, ui) {
    $('.element-group').each(function(index) {
        $(this).css('z-index', 0);
    });
}