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

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*));