jquery droppable ->避免多次滴落同一个物体 [英] jquery droppable -> avoid multiple drops of the same object

问题描述

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

I have a container with different draggable -elements and there is a list of some "target" divs, where the user can drop the draggable elements.

示例:想象一下，你有一个标签"列表(House,Computer,Car,..)和一些作为目标的文档列表(所有文档都是 div <div id="doclist">).所以目标是使用拖动&将标签"分配给文档.降低.顺便说一句，每个 tag-Div 都有一个唯一的 id (<div id="e34a568b2">)

Example: Imagine, you have a list of "tags" (House,Computer,Car,..) and a list of some documents as target (all documents are part of the div <div id="doclist">). So the target is to assign the "tags" to the document using drag & drop. By the way, every tag-Div has an unique id (<div id="e34a568b2">)

使标签"可拖动的代码:

Code for making the "tags" draggable:

$('#taglist').find('div').draggable(
    {helper: "clone"});

使文档可放置"的代码:

Code for making the documents "droppable":

$('#doclist').droppable({
        drop: function( event, ui )
                       {tag=ui.draggable;
                        tag.clone().appendTo( this );
                       } });

到目前为止，这很好用.问题是，现在您可以将相同的标签多次分配给相同的文档.示例:文档 1 可以得到标签房子"5 次，标签电脑"3 次.

Until now, this works well. The Problem is, that right now you can assign the same tag multiple times to same documents. Example: document 1 can get tag "House" 5 times, Tag "Computer" 3 times.

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

My target is, that every document can have every tag only one time.

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

I don't know, how to solve this problem. Right now, i thnik there are to ways:

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

1.) expand the "drop" function by walking trough the DOM $(this).find... to see, if there is an element with the same id - in this case, don't clone&append again. Probably this needs a lot of performance.

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

2.) use the "accept" feature of the draggable widget. But i don't know how to use this at this situation.

感谢您的任何帮助.

推荐答案

首先，您应该确保页面中永远不会有两个具有相同 id 的元素.所以在drop的时候，你想以某种方式改变id，例如:

First, you should make sure to never have two elements with the same id in the page. So when dropping, you want to change the id in some manner, e.g.:

$('#doclist').droppable({
  drop: function( event, ui ) {
    tag=ui.draggable;
    tag.clone().attr("id", "copy-" + tag.attr("id")).appendTo( this );
  }
});

接下来，您确实可以使用 accept 并检查 DOM.不用担心，我认为这不会太占用资源.比如:

Next, indeed you could use accept and checking the DOM. Don't worry, I don't think it will be too resource intensive. Something like:

$('#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;
  }
});

这篇关于jquery droppable ->避免多次滴落同一个物体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！