jquery-ui sortable：当使用多个可排序元素时被拖到后面的元素

我有一系列嵌套的可排序元素，表现出一些奇怪的行为与z-indexes。jquery-ui sortable：当使用多个可排序元素时被拖到后面的元素

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

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

详细说明：

鉴于排序列表甲轮流A中的每个元素都包含一个连接排序列表乙（如在每个A的B列出全部连接）

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

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

来源

2011-09-29 Toby Hede

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

在定义sortables，使用方法：

appendTo: "body" 
helper: "clone"

这打破了拖元素完全脱离嵌套排序Z排序，并解决问题。

来源

2011-10-02 02:37:35

请注意，您可能需要重新应用一些CSS样式到辅助对象，因为它可能会丢失从其父亲继承的样式。 – ElBel

我知道这是一个旧的线程，但我有一个稍微不同的解决方案。在将它放到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; 
}

来源

2012-06-14 16:37:07 Fermis

漂亮反应迟缓，但对于任何人在未来谁跟随我发现，如果你是移动多个元素，可以覆盖排序和stop用于设置元素的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); 
    }); 
}

来源

2017-05-22 16:44:09

jquery-ui sortable：当使用多个可排序元素时被拖到后面的元素

回答

相关问题