如何使拖拽列表中进行复制，而不是移动列表项

Question

我有两个不同的div，一个是充满列表项，另一个是空白。我可以将列表项从左向右拖动。我使用jQuery Sortable引导插件。

FIDDLE

有了这个插件，如果我从左至右列出它自拖到一个例子不胜枚举右侧（移动），但我的要求是，如果我拖放列表的COPY将在右边。它不应该移动。

所以，如果我从我的例子说：我是拖动项目5到右侧和第5项的副本将建立和左侧保持相同。

我不知道它是否能与jQuery UI的插件来完成，但我不希望使用的用户界面，因为我是一个非常大的文件，有和我已经有这么多。因此，关于这个或任何其他插件的帮助将真正帮助我，因为我在这里停留了一整天 [对不起，我英文不好]

JS

var adjustment 

$("ol.simple_with_animation").sortable({ 
    group: 'simple_with_animation', 
    pullPlaceholder: false, 
    // animation on drop 
    onDrop: function (item, targetContainer, _super) { 
    var clonedItem = $('<li/>').css({height: 0}) 
    item.before(clonedItem) 
    clonedItem.animate({'height': item.height()}) 

    item.animate(clonedItem.position(), function () { 
     clonedItem.detach() 
     _super(item) 
    }) 
    }, 

    // set item relative to cursor position 
    onDragStart: function ($item, container, _super) { 
    var offset = $item.offset(), 
    pointer = container.rootGroup.pointer 

    adjustment = { 
     left: pointer.left - offset.left, 
     top: pointer.top - offset.top 
    } 

    _super($item, container) 
    }, 
    onDrag: function ($item, position) { 
    $item.css({ 
     left: position.left - adjustment.left, 
     top: position.top - adjustment.top 
    }) 
    } 
}) 

Answer 1

我包的第一个元素在另一个div并给灰箱一个id。然后我在dragStart上使用jQuery的.clone(true, true)来克隆灰色框。克隆绑定到对象的事件侦听器的true, true参数非常重要。 Sortable库提供afterMove，我在其上删除原始灰色div并追加其克隆。

afterMove: function ($placeholder, container, $closestItemOrContainer) { 
    b.remove(); 
    a.appendTo(append); 
    $("ol.simple_with_animation").sortable("destroy"); 
    e(); 
}, 

我呼吁的对象.sortable("destroy")使他们的状态可以在e()函数的递归执行刷新。

请注意，我已将整个事件放在递归函数e()中，但您可以使用另一个事件侦听器以不同方式实现此功能。

Here's the JSFiddle.