可排序的克隆助手无法正常工作

也许我不明白克隆如何与可排序一起工作，但这是我想做的。

在排序项目时，我想要拖动项目的克隆，直到我停止将项目放在新位置。

这是代码：

     .sort { width: 150px; } .ui-state-highlight { background-color: #000; height:2px; }    
 
 
Item 1
 
Item 2
 
Item 3
 
Item 4
 
 
  $(function() { $('.sort').sortable({ helper: 'clone', placeholder: 'ui-state-highlight', opacity: '.5' }) })    

在此先感谢您的帮助！

Answer 1

使用克隆选项时，开始拖动时，原始项目将以style="display: none"隐藏。 您可以将处理程序附加到sort事件（或隐藏原始项目的任何事件）以重新显示它。 那么一切都应该适合你。

PS我用Firebug来看看原始元素发生了什么。 如果你没有使用它，你真的应该是！

Answer 2

它只是破解它的一种方法。 你可以从这里开始。 更改您的配置如下。

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

Answer 3

我有两个列表，sortable1和sortable2。 我想将sortable1中的项目克隆到sortable2，反之亦然。

一个改进必须是检查它是否是顶部元素，如果是的话。 prev（）不起作用。 因此检查是否有prev，如果没有使用after（）。

我的解决方案是：

 $("#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(); 

Answer 4

虽然它可能无法解决您遇到的问题。 参数末尾有一个额外的逗号。

 opacity: '.5', 

Answer 5

关于John Bledsoe所说的改进的几句话。 要克隆＃sortable1中的第一个元素，我使用这样的代码：

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