клонировать узел при перетаскивании

Question

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

Answer 1

Отметка,

Попробуйте этот пример:

        $(document).ready(function(){
        $(".objectDrag").draggable({helper:'clone'});  

        $("#garbageCollector").droppable({
            accept: ".objectDrag",
            drop: function(event,ui){
                    console.log("Item was Dropped");
                    $(this).append($(ui.draggable).clone());
                }
        });

    });

И Html выглядит так

        <div class="objectDrag" 
        style="width:10%; color:white;border:black 1px solid; background-color:#00A">Drag me</div>

    <div id="garbageCollector" style="width:100%; height:400px; background-color:#333; color:white;"> Drop items on me</div>

Answer 2

Поскольку я не могу комментировать (пока), я оставлю это как отдельный ответ - на случай, если кто-то, как я, найдет этот вопрос:

На вопрос из комментария

«Но я хочу, чтобы клонированный/удаленный элемент находился в той же позиции, в которой он был удален.ты знаешь, как мне это сделать?»

Я нашел решение в другом вопросе SO, и ответ - изменить эту строку:

   $(this).append($(ui.draggable).clone());

к

   $(this).append($(ui.helper).clone());

(измените ui.draggable на ui.helper)

Надеюсь, поможет.

Answer 3

Чтобы перетащить клон / копию, установите для аргумента withDataAndEvents значение true :

$(this).append($(ui.draggable).clone(*true*));