Изменение перетаскиваемого объекта при перетаскивании начинается

Question

Я пытаюсь создать что-то вроде дизайнера пользовательского интерфейса. Поэтому у меня есть «набор инструментов» и «холст». Когда я помещаю элементы инструментария как перетаскиваемые, я могу их перетащить. Но мне нужно перетащить копию, чтобы я мог перетаскивать несколько экземпляров элемента инструмента на холст.

$('.tool-box-item').draggable({ 
    helper : 'clone', 
    drag : function (event, ui){ 
     // jQuery does not allow object modification here 
    }, 
}); 

Это не работает, как клонирование применяется только во время перетаскивания, и как только сопротивление будет завершено, оригинальный элемент перемещается. Я попытался переопределить свойство drag, но я не могу изменить элемент перетаскивания. То же самое было с началом.

Примечание: Я не могу использовать событие остановки, поскольку я хочу создать копию, когда начинается перетаскивание, а не после нее. Я также смог создать копию, определив холст как droppable и сделав там копию, Но потом снова хочу создать копию, когда начинается перетаскивание.

Я думаю, мне нужно будет создать пользовательскую функцию перетаскивания, но надеялся, что если jQuery будет иметь другой альтернативный способ.

Вот jsfiddle, но я хочу клонировать элемент в начале, а не после перетаскивания.

РЕДАКТИРОВАТЬ: Пункт назначения является сторонним органом управления. Он имеет собственную реализацию для события drop (укладка и выравнивание). В случае, если я буду клонировать его в конце, мне придется изменить их реализацию.

Answer 1

Чтобы сохранить "dragend" событие, попробуйте использовать оригинальный элемент для перетаскивания, а клонировать его для вашего «инструментария».

var graggableConfig = { 
    helper:"clone", 
    stop: function(event, ui){ 
    var clon = $(this).clone(); 
    clon.attr("style","") 
    .appendTo(".src") 
    .draggable(graggableConfig); 
    $(this).detach() 
    .attr("style","") 
    .appendTo(".dst") 
    .draggable("destroy"); 
    } 
}; 
$(".item").draggable(graggableConfig); 

codepen here

Answer 2

Вы можете использовать метод jquery clone (https://api.jquery.com/clone/) для клонирования вашего перетаскиваемого элемента после его удаления. Что-то вроде этого отвечает вашим потребностям?

$(function() { 
    makeDraggable($("#draggable")); 
}); 

function makeDraggable(element) { 
    $(element).attr('style', 'position:absolute').draggable({ 
     start: function() { 
      makeDraggable($('#draggable').clone().attr('style', '').appendTo('body')); 
     } 
    }); 
} 

Его немного грубо, но вот jsbin: https://jsbin.com/tasodixoka/edit?html,output

Edit: Я обновил свою скрипку: https://jsfiddle.net/z9rrL6po/6/