jquery droppable -> 避免多次删除同一对象

我有一个包含不同可拖动元素的容器，并且有一些“目标”div 的列表，用户可以在其中放置可拖动元素。

例子： 想象一下，您有一个“标签”列表（房屋、计算机、汽车……）和一些作为目标的文档列表（所有文档都是 div 的一部分）<div id="doclist">）。因此，目标是使用拖放将“标签”分配给文档。顺便说一句，每个 tag-Div 都有一个唯一的 id (<div id="e34a568b2">)

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

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

使文档“可删除”的代码：

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

到目前为止，这种方法运作良好。 问题是，现在您可以将相同的标签多次分配给相同的文档。 示例：文档1可以获得标签“House”5次，标签“Computer”3次。

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

我不知道，如何解决这个问题。目前，我认为有以下几种方法：

1.) 通过遍历 DOM $(this).find... 来扩展“drop”函数，以查看是否存在具有相同 id 的元素 - 在这种情况下，不要再次克隆和追加。可能这需要大量的性能。

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

感谢您提供任何帮助。

首先，您应该确保页面中永远不会有两个具有相同 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;
  }
});