可排序元素的项目在被拖动时会丢失其 CSS 样式？（如果appendTo：'body'）

Question

我有一个可排序的项目列表，它根据用户在搜索框中键入的内容返回结果。结果总是溢出，在这里我使用以下 css：

#list { overflow-x: visible; overflow-y: hidden; }

这允许我只有一个垂直滚动条。然后，我将列表中的各个 li 拖到可放置区域。使用下面的 JQuery 将可排序功能添加到列表中：

$("#list").sortable({
   connectWith: ".connectedSortable",
   helper: 'clone',
   appendTo: 'body',
   zIndex: 999
});

我使用appendTo：'body'的原因是为了确保被拖动的项目位于所有内容之上，并且在拖动时不会位于列表的其他项目之下。但是，每当我从列表中拖动任何项目时，该项目中的 DIV 的 CSS 样式都会消失。

我知道这是因为当拖动该项目时，它被附加到“body”，因此没有任何父级来继承原始 CSS 样式。

我的问题是如何将拖动的项目设计回其原始样式，以确保即使我拖动/不拖动它它也保持不变？通过事件？

编辑：

找到了 css 混乱的原因。这是一个随机的br扔在两个div之间，导致当项目被拖动并附加到正文时，它会被不同地解释。

Answer 1

您有两种选择来解决问题。一种是使用该函数创建您自己的助手。通过这种方式，您可以按照您想要的方式设置样式，将其包装在元素中，添加类等。

下面的演示显示了差异，上面的一个可以工作，下面的一个坏了。http://jsfiddle.net/hPEAb/

$('ul').sortable({
    appendTo: 'body',
    helper: function(event,$item){
        var $helper = $('<ul></ul>').addClass('styled');
        return $helper.append($item.clone());
    }
});

另一个选择是不使用append:'body'，而是使用 zIndex 。你的zIndex:999显然没有效果，因为默认值是 1000。:) 问题zIndex是它只对兄弟元素、同一父元素中的元素重要。因此，如果您的表单上有另一个可排序项zIndex，其大小大于当前可排序项，则无论您当前拖动的项是什么，它的项目都可以轻松地位于您拖动的项之上zIndex。

解决方案是在拖动开始时将整个可排序推到顶部，并在拖动停止时恢复它：

$('#mySortable').sortable({
    start: function(){
        // Push sortable to top
        $(this).css('zIndex', 999);
    },
    stop: function(){
        // Reset zIndex
        $(this).css('zIndex', 0);
    }
});

如果原始值很重要，您甚至可以保存原始值zIndex并.data()在以后检索它。