如果可拖放元素已经包含，Jquery将恢复拖动

Question

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

有4个盒子(A, B, C, D)，都是可掉落的。＂．项目"div "是可拖拽的，可以在4个可拖拽项中的任何一个上拖拽。

我想让item的一个副本被放置在一个可掉落物品上。因此，当我试图再次在相同的可掉落物品的副本，它不会允许我。目前我已经插入了一个警报。但是我想取消或恢复拖动。

请帮助我，因为我想我错过了一些东西。我搜索了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

您可以使用这篇博文中的技巧:使用revert: function(socketObj)

下面是一个工作示例:http://jsfiddle.net/dJyUQ/16/

[EDIT] Richard的回答要好得多。我将为revert方法中函数的使用留下我的答案(尽管我发现这是一个好主意，请查看文章)。

Answer 3

将拖放代码更改为以下

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