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

【问题标题】：jquery-ui sortable: elements dragged behind when using multiple sortablesjquery-ui sortable：使用多个可排序元素时拖到后面的元素
【发布时间】：2011-11-27 10:15:53
【问题描述】：

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

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

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

详情：

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

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

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

【问题讨论】：

标签： jquery jquery-ui event-handling jquery-ui-sortable

【解决方案1】：

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

定义排序对象时，请使用：

appendTo: "body"
helper: "clone"

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

【讨论】：

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

【解决方案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;
 }

【讨论】：

【解决方案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);
    });
}

【讨论】：