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

Question

我有一个包含不同可拖动元素的容器，并且有一些“目标”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.) 使用可拖动小部件的“接受”功能。但我不知道在这种情况下如何使用它。

感谢您提供的任何帮助。

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;
  }
});