jquery droppable -> 避免多次放置同一个对象答案

【问题标题】：jquery droppable -> avoid multiple drops of the same objectjquery droppable -> 避免多次放置同一个对象
【发布时间】：2012-02-14 15:16:05
【问题描述】：

我有一个包含不同可拖动元素的容器，并且有一些“目标”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 可以得到标签“房子”5 次，标签“电脑”3 次。

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

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

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

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

感谢您的任何帮助。

【问题讨论】：

你能提供一个关于jsfiddle的小提琴吗？

标签： jquery jquery-ui drag-and-drop draggable droppable

【解决方案1】：

首先，您应该确保页面中永远不会有两个具有相同 id 的元素。所以在drop的时候，你想以某种方式改变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;
  }
});

【讨论】：

谢谢，这就是我要找的！ :-)
@Linus G Theil 很酷的答案:)

【解决方案2】：

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

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

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

接受：函数（可拖动）{ 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;
    }

}

【讨论】：