可排序元素的项目在被拖动时丢失其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乱搞的原因。 它是在两个div之间抛出的随机br ，导致在拖动项目并将其附加到正文时对其进行不同的解释。

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

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

Answer 2

谢谢DarthJDG。 我知道这个帖子有点旧，但我希望能帮助那些遇到同样问题的人。

我不得不稍微编辑你的解决方案，因为在将项目附加到帮助程序时样式已关闭。 我最终只是重新创建了list元素。 以防其他人遇到同样的问题我做了。

我将其添加到我创建可排序区域。

我从可排序的文本中取出文本并创建了一个新的列表项，并将其作为文本。

使用Javascript：

       appendTo: 'body',
       helper: function(event,$item){
          console.log(event);
          var $helper = $('<ul class = "styled" id="' + event.originalEvent.target.id + '"><li>' + event.originalEvent.target.innerText + '</li></ul>');
          return $helper;
        }

然后，我可以为可拖动对象添加自定义样式，包括没有问题的自定义文本。 我最终使用的样式是JQuery Smoothness的样式。

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-x;
      font-weight: normal;
      color: #555;
      list-style-type: none;
    }