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

问题描述

我有一个容器具有不同的拖动元素，并且有一些targetdiv的列表，用户可以在其中放置可拖动元素。

示例：
想象一下，你有一个标签（House，Computer，Car，..）和一些文档列表作为目标（所有文档都是div < div id的一部分= 文档列表 > ）。因此，目标是使用拖放功能将标签分配给文档。下降。顺便说一句，每个标签-DD都有唯一的ID（< div id =e34a568b2> ）

用于制作标签的代码可拖动：

  $（'＃taglist'）。find（'div'）。 draggable（
 {helper：clone}）; 
  

制作文档的代码droppable：

$ {code> $（'＃doclist'）。droppable（{
drop：function（event，ui））
{tag = ui.draggable;
tag.clone（）。appendTo（this）;
}}）;

到目前为止，这个效果很好。
问题是，现在您可以将相同的标签多次分配给相同的文档。
示例：文档1可以获取标签房屋5次，标签电脑3次。

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

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

1。）扩展drop功能，通过DOM $（this）.find ...来查看，如果有一个id相同的元素 - 在这种情况下，不要再次克隆& append。可能这需要很多的表现。

2）使用可拖动小部件的接受功能。但是我不知道在这种情况下如何使用这个。

感谢您的帮助。

解决方案

首先，你应该确保在页面中不要有两个与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; 
} 
}）; 
  

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.

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

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.) 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.) use the "accept" feature of the draggable widget. But i don't know how to use this at this situation.

Thank you for any kind of help.

解决方案

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

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屋！