jquery droppable -> avoid multiple drops of the same object

Question

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,

Answer 1

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

  }

Answer 2

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