使用 JQuery 在 Droppend 时停止删除可拖动元素答案

【问题标题】：Stop draggable element being removed when it is Droppend using JQuery使用 JQuery 在 Droppend 时停止删除可拖动元素
【发布时间】：2016-02-27 02:01:36
【问题描述】：

我使用 JQuery Draggable 和 Droppable 将对象从一个 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));
            }
        });

感谢任何帮助。

【问题讨论】：

标签： javascript jquery jquery-ui jquery-ui-draggable jquery-ui-droppable

【解决方案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

【讨论】：

$('.draggableItems').append(ui.helper.clone());我尝试将其添加到 drop 功能中，但它不起作用。这就是你的意思吗？
是的，但您可能必须使用ui.draggable 而不是helper
我添加了一个例子，如果你想看看

【解决方案2】：

设法解决了这个问题。我发现这篇文章特别有用。

Constrain draggable element after it has been dropped

【讨论】：