如果 droppable 已经包含该元素，jquery 恢复拖动

Question

我面临着拖拽的问题。这是小提琴。 http://jsfiddle.net/dJyUQ/16/

有 4 个框（A、B、C ，D）并且所有都是可丢弃的。 “.item”div 是可拖动的，并且可以放置在 4 个 droppable 中的任何一个上。

我只想将一份物品副本放置在一个可放置物品上。因此，当我尝试再次将项目的副本放置在同一个可放置对象上时，它不允许我这样做。目前我已经插入了一个警报。但我想取消或恢复拖动。

请帮助我，因为我认为我错过了一些东西。我搜索了 jquery ui 拖放插件但找不到任何东西。

Answer 1

将您的放置代码更改为：

drop: function(event, ui){
    if($(this).children(".itemcopy").size() > 0) {
        alert("cancel");    //Instead want to cancel dragging of item
        return false;
    }
    $(this).append("<div class='itemcopy'>"+ui.draggable.html()+"</div>");        
}

http://jsfiddle.net/dJyUQ/18/

Answer 2

您可以使用这篇博客文章中的这个技巧：使用 < code>revert: function(socketObj)

这是一个工作示例：http://jsfiddle.net/dJyUQ/16/

[编辑]理查德的答案要好得多。我将留下关于在 revert 方法中使用函数的答案（不过我发现这是一个好主意，请查看这篇文章）。

Answer 3

将放置代码更改为以下内容

drop: function(event, ui){
               if(!($(this).children(".itemcopy").size() == 1)) {
                 $(this).append("<div class='itemcopy'>"+ui.draggable.html()+"</div>");   
        }
    }