Question

我有一系列嵌套的可排序元素，表现出z-index的一些奇怪行为。

基本上，在某些情况下，元素会被拖动到父容器中。它仅在父元素已经排序后出现。

看起来后面的问题只是在列表的下方元素上。所以我可以拖动到“更高”的可排序，但拖动到“更低”可排序，拖动元素突然落后。

详细信息：

鉴于可排序列表 A A中的每个元素依次包含一个连接可排序列表 B （如每个A中的B列表都已连接）

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

我通过CSS和Jquery玩各种z-index选项无济于事。

Answer 1

我找到了解决此问题的方法。

定义可排序时，请使用：

appendTo: "body"
helper: "clone"

这会将拖动的元素完全从嵌套的可排序z排序中分离出来并解决问题。

Answer 2

我知道这是一个旧线程，但我的解决方案略有不同。在将它添加到主体后，我的元素丢失了它的所有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

响应很晚，但是对于将来关注的任何人我发现如果你移动多个元素，你可以覆盖排序和停止功能来设置元素的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);
    });
}

jquery-ui sortable：使用多个sortables时拖后的元素

3 个答案: