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

【问题标题】：jquery revert dragging if droppable already contains that element如果 droppable 已经包含该元素，则 jquery 恢复拖动
【发布时间】：2011-10-13 07:19:30
【问题描述】：

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

有 4 个盒子（A、B、C、D）并且都是可放置的。 “.item” div 是可拖动的，可以拖放到 4 个可放置对象中的任何一个上。

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

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

【问题讨论】：

也许将旧位置保存到变量中？然后使用该变量设置对象位置？

标签： jquery draggable droppable

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

【讨论】：

感谢答案如此简单。

【解决方案2】：

你可以从this blog article使用这个技巧：使用revert: function(socketObj)

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

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

【讨论】：

感谢答案如此简单。

【解决方案3】：

将下拉代码更改为以下

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

【讨论】：