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

Question

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

它可以拖放，但是当它掉落时，它会从可拖动列表中删除。

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

我试图将克隆追加到可拖动的 class 上，但这没有用。

这是我的代码

       $(".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" 和使用 jQuery 的 clone() 函数克隆元素并将其添加到 droppable 地区：

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

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

Working demo

Answer 2

已成功解决问题。我发现这个 post 特别有用。

Constrain draggable element after it has been dropped