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

Posted 2023-05-08

【中文标题】使用 JQuery 在 Droppend 时停止删除可拖动元素

【英文标题】：Stop draggable element being removed when it is Droppend using JQuery

【发布时间】：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));
            
        );

感谢任何帮助。

【参考方案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