jquery 可删除 ->避免同一物体多次掉落

Question

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

例子： 想象一下，您有一个“标签”列表（房屋、计算机、汽车等）和一些作为目标文档的列表（所有文档都是 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次，标签“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;
  }
});

Answer 2

好吧，所以我想稍微改进一下该代码，并删除一条错误消息，说明为什么该项目不被接受。但它添加了项目打印错误然后它不接受然后没有打印为什么会发生？
有 2 个限制；

• 检查该项目是否添加了两次，如果没有；

• 然后检查所有项目的计数是否大于 4 或等于？

  接受：函数（可拖动）{
  if($(this).find("#copy-" + Draggable.attr("菜单项ID")).length == 0)
  {

   if($(this).find('li.dinamik').length>=4)
          {
              $("#errorMsg").show("slow", function(){ $(this).hide(6000);}).text("不能超过 4 个项目");
              返回假；    
          返回真；
  } else if($(this).find("#copy-" + Draggable.attr("menu-item-id")).length >= 1)
      {
          $("#errorMsg").show("慢").text("不能重复"+draggable.text());
          返回假；
      }
  

  }