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.

Toby Hede · Accepted Answer · 2011-10-02 02:37:35Z

17

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.

answered Oct 2, 2011 at 2:37

Toby Hede

37.3k28 gold badges139 silver badges164 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ElBel Over a year ago

Note that you may have to reapply some CSS styles to the helper object, as it may lose styles inherited from its former parent.

Fermis · Accepted Answer · 2012-06-14 17:52:00Z

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;
 }

Jon Duelfer · Accepted Answer · 2017-05-22 16:44:09Z

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);
    });
}

Collectives™ on Stack Overflow

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

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related