jQuery UI Sortable - IE6 & IE7 z-index issue

Question

I'm trying to use jQuery UI's sortable but when dragging from one container to another, the item is appearing BEHIND the container.

JSFiddle: http://jsfiddle.net/7LrLE/8/

I've uploaded a screen:

Here's my code:

<ul class="droppable grid-9">
  <li>aaaaaaaa</li>
  <li>bbbbbbbbbbbbbbbb</li>
  <li>ccccccccccccccc</li>
</ul>
<ul class="droppable grid-9">
  <li>xxxxxxxxxxx</li>
  <li>yyyyyyyyyyyy</li>
  <li>zzzzzzzzzzzzzz</li>
</ul>

And here's my jQuery code:

$('.droppable').sortable({
  appendTo: 'body'
  axis: 'y',
  connectWith: '.droppable',
  zIndex: 5
}).disableSelection();

Any help is greatly appreciated!

FIXED

I was able to fix the issue using the following jQuery code:

$('.droppable').sortable({
  axis: 'y',
  connectWith: '.droppable',
  over: function() {
    $(this).css('z-index', '1');
  },
  start: function() {
    $(this).css('z-index','2');
  }
}).disableSelection();

Answer 1

我认为您需要动态减小zIndex属性，以便上方的元素具有比下方的元素更高的zIndex