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

Question

我有一个具有不同draggable -elements的容器,并且有一些"target"div的列表,用户可以删除可拖动的元素.

示例:想象一下,您有一个"标签"列表(House,Computer,Car,..)和一些文档列表作为目标(所有文档都是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次,标记"计算机"3次.

我的目标是,每个文档只能有一次标记.

我不知道,如何解决这个问题.现在,我有办法:

1.)通过走DOM $(this)来扩展"drop"函数.find ...看看,如果有一个具有相同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;
  }
});