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

Answer 2

okey所以我想稍微改进一下这段代码并丢失错误信息为什么不接受该项目。但它添加项目打印错误然后它不接受然后没有打印为什么会发生？有2个限制;

检查项目是否添加两次，如果没有;

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

接受：function（draggable）{ 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;
    }

}

jquery droppable - ＆gt;避免多次掉落同一个物体

2 个答案: