jquery droppable -> avoid multiple drops of the same object

问题

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.

回答1:

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

回答2:

okey so i wanted to improve that code a little bit and drop an error msg why the item is not accepted. but it adds the item prints error then it doesnt accept then no prints why does happen? There are 2 limitations;

• Check to see if the item is added twice if not;

• then check to see if count of all the item more than 4 or equal?

  accept: 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;
      }
  

  }

来源：https://stackoverflow.com/questions/9279380/jquery-droppable-avoid-multiple-drops-of-the-same-object