Клон node при перетаскивании

Я хочу иметь возможность создать копию элемента, который я хочу перетащить. im используя стандартный ui draggable и droppable. Я знаю об опции helper clone. но это не создает копию. перетаскиваемый элемент возвращается в исходное положение.

Ответ 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>

Ответ 2

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

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

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

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

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

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

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

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

Ответ 3

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

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