javascript - 使用 JQuery Droppend 时停止删除可拖动元素

Question

我使用 JQuery Draggable 和 Droppable 将一个对象从一个 div 拖放到另一个 div 中。

它可以很好地拖放，但当它确实放下时，它就会从可拖动列表中删除。

有没有办法在对象被丢弃后仍保留它。

我尝试将克隆附加回可拖动类，但这不起作用。

这是我的代码

       $(".draggableItems").draggable({
            scroll: false,
            helper: 'clone',    
        });

        $(".droppable-content").droppable({
            accept: ".draggableItems",
            activeClass: "ui-state-default",
            hoverClass: "ui-state-hover",
            drop: function (event, ui) {
                $(".droppable-content").append($(ui.draggable));
            }
        });

感谢任何帮助。

Answer 1

您可以结合 draggable 的 helper: "clone" 并使用 clone() jQuery 函数克隆元素并将其添加到 droppable 区域:

$("#draggable li").draggable({
    helper: "clone"
}).disableSelection();

$("#droppable").droppable({
    drop: function (event, ui) {
        $(this).append(ui.draggable.clone());
    }
});

Working demo