Jquery-ui可排序:当使用多个可排序表时拖到后面的元素

Question

我有一系列嵌套的可排序元素，它们在z索引中表现出一些奇怪的行为。

基本上，在某些情况下，元素被拖到父容器的后面。它只出现在父元素排序之后。

看起来后面的问题只出现在列表后面的元素上。所以我可以拖到"较高"的可排序对象，但是拖到"较低"的可排序对象，拖动元素就会突然落后。

细节:

给可排序列表AA中的每个元素依次包含一个连接可排序列表B(因为每个A中的B列表都是连接的)

在A中对一个元素进行排序后，从列表中可排序的元素中拖出的元素现在位于其他A元素的后面。

我通过CSS和Jquery尝试了各种z-index选项，但都无济于事。

Answer 1

我找到了一个解决这个问题的方法。

定义排序表时，使用:

appendTo: "body"
helper: "clone"

这将使拖动的元素完全脱离嵌套的可排序z顺序并解决问题。

Answer 2

我知道这是一个旧的线程，但我有一个稍微不同的解决方案。在将它附加到body之后，我的元素失去了所有的CSS属性。我的解决方法是创建我自己的自定义助手对象。

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

Answer 3

相当晚的响应，但是对于任何在未来跟随的人来说，我发现如果您正在移动多个元素，您可以覆盖sort和stop函数来设置元素的z-index。例如:

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

这将更新当前元素的z-index属性，确保它始终位于顶部。因此，您可以将此想法扩展到分组元素。想象一下:

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