使用 jquery-ui droppable 时，如何从 droppable 区域中删除已经删除的项目？答案

【问题标题】：When using jquery-ui droppable, how can you remove an item from the droppable area after you have already dropped it?使用 jquery-ui droppable 时，如何从 droppable 区域中删除已经删除的项目？
【发布时间】：2013-11-30 06:26:10
【问题描述】：

我有一个 html 页面，其中包含一些可拖动的图像和一组可放置的 div。使用下面的代码一切正常，但我不知道如何在它被丢弃后从可丢弃区域移除一个项目。（假设用户改变了主意。..）

我想要一些行为，如果你将一个项目拖出可放置区域，它就会从可放置区域中删除。我希望这是开箱即用的行为，但显然不是。

$(".draggable").draggable({ cursor: "move", revert: "invalid", helper: "clone" });

$(".droppable").droppable({
    hoverClass: "ui-state-active",
            drop: function (ev, ui) {
                $(this).append($(ui.draggable).clone());
            }
});

是否有支持该行为的方法，以便我可以从可放置项中删除项目（我是否也需要将其设置为可拖动项？对于我认为如此简单和基本的功能来说，这似乎有点奇怪和矫枉过正......

【问题讨论】：

您在寻找什么我的答案缺少它是一个公认的答案吗？如果缺少某些内容，我将很乐意进行更改或进行更多研究。请在宽限期结束前告诉我。谢谢
我喜欢 apaul34208 的解决方案，但是如果您想将可拖放对象从一个可拖放对象移动到另一个对象，它目前不可行。

标签： jquery jquery-ui jquery-ui-droppable

【解决方案1】：

我会像这样使用 droppable 的 out event 到 remove 的可拖动对象：

Working Example

$(".draggable").draggable({
    cursor: "move",
    revert: "invalid",
    helper: "clone"
});

$(".droppable").droppable({
    accept: '.draggable',
    hoverClass: "ui-state-active",
    drop: function (ev, ui) {
        if ($(ui.draggable).hasClass('new')) {
            $('.new').draggable({
                revert: true
            });
        } else {
            $(this).append($(ui.draggable).clone().draggable({
                helper: "original"
            }).addClass('new'));
        }
    },
    out: function (event, ui) {
        $(ui.draggable).fadeOut(1000, function () {
            $(this).remove();
        });
    }
});

【讨论】：

很好的例子，只是一个小评论。您需要在淡出之前检查该元素是否先前已添加，如果没有，您可以删除原始元素。添加 if ($(ui.draggable).hasClass('new')) 解决了这个问题

【解决方案2】：

我不认为这是jQuery UI 的标准功能，但以下是几个示例。（假设您希望在拖动时克隆原始图像）

HTML

<div id="test">
     <div class="draggable">Image</div>
     <div class="draggable">Image2</div>
     <div class="draggable">Image3</div>
     <br>
     <br>
     <div class="droppable"></div>
     <div class="droppable"></div>
     <div class="droppable"></div>
</div>

jQuery

var original = true;
var droppable = false;

$( ".draggable" ).draggable({
    helper : "clone",
    stop: function( event, ui ) {
        original = false;
    },
    start: function( event, ui ) {
        original = true;   
    }
});

$( ".droppable" ).droppable({
    drop: function( event, ui ) {
        droppable = true;
        if(original){
            ui.helper.removeClass('ui-draggable-dragging');
            var newDiv = $(ui.helper).clone();
            newDiv.draggable({
                stop: function( event, ui ) {
                    if(!droppable)
                        ui.helper.remove();
                },
                start: function( event, ui ) {
                    droppable = false;    
                }
            });
            $(this).append(newDiv);
        }
        else
            $(this).append(ui.helper);
    }  
});

小提琴

http://jsfiddle.net/Bkk5F/3/

替代 - Snappy 版本

http://jsfiddle.net/Bkk5F/2/

【讨论】：

【解决方案3】：

这真的取决于你想做什么。目前，当您放下可拖动对象时，您正在创建一个没有任何功能的克隆 - 这就是它之后不会移动的原因。

我认为您正在尝试做的事情，我在这里完成了：http://jsfiddle.net/RDg9B/1/ - 用户将可拖动对象拖到容器中；如果他改变主意，他会把它拖到容器外。

然而，一般来说，在设计 UI 时，我一直在使用垃圾容器，用户可以将不需要的项目移动到该容器中 - 它们可以消失，也可以返回到原来的位置（向 document.body 添加可放置功能很棘手）

作为一个附加组件，这里是克隆的小提琴（这是相当合乎逻辑和预期的行为：D）！ http://jsfiddle.net/RDg9B/2/

【讨论】：

【解决方案4】：

您可以尝试在您的可放置容器上实现 sortable()。我试过这样的事情：http://jsbin.com/axegem/105/

希望对你有帮助

【讨论】：