可排序元素的項目在被拖動時丟失其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;
    }