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, 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.

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