jquery ui排序表：使用多个排序表时拖后的元素

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

基本上，在某些情况下，元素被拖到父容器后面。它仅在父元素排序后显示

另外，后面的问题似乎只出现在列表后面的元素上。因此，我可以拖动到“更高”的排序表，但拖动到“更低”的排序表时，拖动元素突然落后

详细信息：

给定 可排序列表A A中的每个元素依次包含一个连接可排序列表B（与每个A中的B列表一样，都是连接的）

对A中的某个元素进行排序后，从该列表中的可排序项中拖动的元素现在位于其他A元素的后面

---

我通过CSS和Jquery使用了各种z-index选项，但都没有用。

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

定义排序表时，请使用：

appendTo: "body"
helper: "clone"

---

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

我知道这是一个旧线程，但我有一个稍微不同的解决方案。在将其复制到主体之后，我的元素丢失了它的所有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; 
    },

---

响应很晚，但对于以后的任何人，我发现如果要移动多个元素，可以覆盖排序和停止函数来设置元素的z索引。例如：

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

---

请注意，您可能必须将某些CSS样式重新应用于帮助对象，因为它可能会丢失从以前父对象继承的样式。

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