可排序克隆幫手不工作

也許我不明白克隆如何與可排序工作，但這是我想要做的。可排序克隆幫手不工作

當對一個物品進行排序時，我想要拖動的物品的克隆一直保留，直到我停止將物品放到其新的位置。

下面的代碼：

<html> 
<head> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js"></script> 

    <style type="text/css"> 
     .sort { width: 150px; } 
     .ui-state-highlight { background-color: #000; height:2px; } 
    </style> 
</head> 
<body> 
    <div> 
     <ul class="sort"> 
      <li>Item 1</li> 
      <li>Item 2</li> 
      <li>Item 3</li> 
      <li>Item 4</li> 
     </ul> 
    </div> 

    <script type="text/javascript"> 
     $(function() { 
      $('.sort').sortable({ 
       helper: 'clone', 
       placeholder: 'ui-state-highlight', 
       opacity: '.5' 
      }) 
     }) 
    </script> 
</body> 
</html>

在此先感謝您的幫助！

來源

2010-06-11 Jeremy Seekamp

當您使用克隆選項時，當您開始拖動時，原始項目被隱藏，並顯示style="display: none"。您可以附加處理程序到排序事件（或任何事件隱藏原始項目）以重新顯示它。那麼一切都應該爲你工作。

P.S.我用Firebug來看看原始元素髮生了什麼。如果你不使用它，你真的應該是！

來源

2010-06-11 17:21:56

雖然它可能無法解決您遇到的問題。在參數結尾處有一個額外的逗號。

opacity: '.5',

來源

2010-06-11 17:15:29 Mike

它只是一種方法來破解它。你可以從這裏開始。如下所示更改您的配置。

 $('.sort').sortable({ 
      helper: 'clone', 
      placeholder: 'ui-state-highlight', 
      opacity: '.5', 
      start: function(event, ui) { 
       $('.sort').find('li:hidden').show(); 
      } 
     })

來源

2010-06-11 19:00:53 simplyharsh

+11

$（ui.item）.show（）會更 '準確' – Vigrond 2012-08-07 10:51:28

和$（ui.helper）包含克隆的幫手。如果你想修改它。 – Armin 2013-08-07 09:20:47

我有兩個列表，sortable1和sortable2。我想克隆從sortable1項目sortable2，反之亦然。

一個改進必須是檢查它是否是頂層元素，如果是。 prev（）將不起作用。因此，檢查是否有prev，如果不在（）之後使用。

我的解決辦法是這樣的：關於改進，約翰·布萊德索說

$("#sortable1").sortable({ 
     helper:"clone", 
     connectWith: "#sortable2", 
     start:function(event,ui){ 
      $(ui.item).show(); 
      clone = $(ui.item).clone(); 
      before = $(ui.item).prev(); 
     }, 
     stop:function(event, ui){ 
      before.after(clone); 
     } 
    }).disableSelection(); 
$("#sortable2").sortable({ 
     helper:"clone", 
     connectWith: "#sortable1", 
     start: function(event, ui){ 
      $(ui.item).show(); 
      clone = $(ui.item).clone(); 
      before = $(ui.item).prev(); 
     }, 
     stop:function(event, ui){ 
      before.after(clone); 
     } 
    }).disableSelection();

來源

2011-06-21 13:11:00

幾句話。對於克隆在＃sortable1第一要素我用這樣的代碼：

stop:function(event, ui){ 
     if (before.length) before.after(clone); 
     else $(this).prepend(clone); 
    },

來源

2017-10-31 20:33:13

可排序克隆幫手不工作

回答

相關問題