Как сделать список перетаскивания сделать копию вместо перемещения элемента списка

Question

У меня есть два разных div, один из них заполнен списком, а другой пуст. Я могу перетащить элементы списка слева направо. Я использую jQuery Sortable Bootstrap plugin.

FIDDLE

С помощью этого плагина, если я перетащить один список слева направо Список это сам идет (движется) на правой стороне Но мое требование, если я перетащить COPY списка будет идет по правой стороне. Он не должен двигаться.

Так что, если я скажу из своего примера: Я перетаскиваю пункт 5 в правую сторону, а Копия пункта 5 создаст, а левая сторона останется такой же.

Я не уверен, что это можно сделать с помощью плагина jQuery UI, но я не хочу использовать интерфейс, потому что я очень большой файл, и у меня уже так много. Таким образом, любая помощь по этому поводу или любой другой плагин действительно поможет мне, потому что я застрял здесь весь день [Извините за Bad English]

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. Затем я клонирую серое поле, используя jQuery's .clone(true, true) на dragStart. Параметры 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.