jquery-ui 拖放 - 如何拖放项目？

Question

我正在尝试使用 jquery-ui。我正在使用一个拖放示例，这几乎正是我所需要的，除了在两个列表之间移动项目之外，我希望克隆这些项目：

http://jqueryui.com/demos/sortable/#connect-lists

$(function() {
    $("#sortable1, #sortable2").sortable({
        connectWith: '.connectedSortable'
    }).disableSelection();
});

<ul id="sortable1" class="connectedSortable">
  <li class="ui-state-default">Item 1</li>
  <li class="ui-state-default">Item 2</li>
  <li class="ui-state-default">Item 3</li>
</ul>

<ul id="sortable2" class="connectedSortable">
  <li class="ui-state-default">Item 1</li>
  <li class="ui-state-default">Item 2</li>
  <li class="ui-state-default">Item 3</li>
</ul>

所以将一个项目从第一个列表移动到第二个列表会导致列表 1 有 2 个项目，而列表 2 有 4 个项目。我只是想让它克隆掉落的物品。所以在上面的例子中，列表 1 仍然有 3 个项目，但列表 2 将有 4 个项目，

谢谢

Answer 1

这不是你的完美答案，但我需要类似的东西...... 将 remove() 处理程序添加到 sortable 将允许您克隆即将被删除的元素。试试这个：

$(function() {
    $("#sortable1, #sortable2").sortable({
        connectWith: '.connectedSortable',
        remove: function(event,ui){
       ui.item.clone().appendTo('#sortable1');
    }
    }).disableSelection();
});

如果您将一个项目从 sortable1 拖动到 sortable2，当您放下它时，它将被添加到 sortable1 的底部。在拖动开始时克隆项目是最有意义的，如果拖动不成功则删除克隆。但我找不到在您开始拖动时触发的事件。