jquery droppable – >避免多次丢弃同一个对象

我有一个容器具有不同的可拖动元素，并且有一些“目标”div的列表，用户可以删除可拖动的元素。

示例：想象一下，您有一个“标签”列表（House，Computer，Car，..）和一些文档列表作为目标（所有文档都是div

）。 因此目标是使用拖放操作将“标签”分配给文档。 顺便说一句，每个tag-Div都有一个唯一的id（

）

使“标签”可拖动的代码：

 $('#taglist').find('div').draggable( {helper: "clone"}); 

使文件“可投放”的代码：

 $('#doclist').droppable({ drop: function( event, ui ) {tag=ui.draggable; tag.clone().appendTo( this ); } }); 

到目前为止，这很有效。 问题是，现在您可以将相同的标签多次分配给相同的文档。 示例：文档1可以标记“House”5次，标记“计算机”3次。

我的目标是，每个文档只能有一次标记。

我不知道，如何解决这个问题。 现在，我有办法：

1.）通过走DOM $（this）来扩展“drop”函数.find …看看，如果有一个具有相同id的元素 – 在这种情况下，不要再次克隆和追加。 可能这需要很多性能。

2.）使用可拖动小部件的“接受”function。 但我不知道在这种情况下如何使用它。

谢谢你的帮助。

Answer 1

首先，您应该确保页面中永远不会有两个具有相同ID的元素。 因此，在删除时，您希望以某种方式更改ID，例如：

 $('#doclist').droppable({ drop: function( event, ui ) { tag=ui.draggable; tag.clone().attr("id", "copy-" + tag.attr("id")).appendTo( this ); } }); 

接下来，确实可以使用accept并检查DOM。 别担心，我认为这不会太耗费资源。 就像是：

 $('#doclist').droppable({ drop: function( event, ui ) { tag=ui.draggable; tag.clone().attr("id", "copy-" + tag.attr("id")).appendTo( this ); }, accept: function(draggable) { return $(this).find("#copy-" + draggable.attr("id")).length == 0; } }); 

Answer 2

好吧，所以我想稍微改进一下这段代码并丢弃一个错误消息，为什么不接受该项目。 但它添加项目打印错误然后它不接受然后没有打印为什么会发生？ 有两个限制;

• 如果没有，检查项目是否被添加两次;

• 然后检查所有项目的计数是否超过4或相等？

  accept：function（draggable）{if（$（this）.find（“＃copy-”+ draggable.attr（“menu-item-id”））。length == 0）{

    if($(this).find('li.dinamik').length>=4) { $("#errorMsg").show("slow", function(){ $(this).hide(6000);}).text("Can not have more than 4 items"); return false; } return true; } else if($(this).find("#copy-" + draggable.attr("menu-item-id")).length >= 1) { $("#errorMsg").show("slow").text("Cant Duplicate"+draggable.text()); return false; } 

  }