title: jquery drag and drop tags many to one
body: <p>Im trying to implement many to one drag drop tagging as <a href="http://jsfiddle.net/7683X/126/" rel="nofollow">jsfiddle.net/7683X/126/</a>. Actually am getting the values of '.box' from database.</p>
  
  <pre><code>$(document).ready(function () {
          galleryDragAndDrop("#test-container", "#gallery-one", "#gallery-two", "#gallery-three", ".box");
  
  });
      function galleryDragAndDrop(mainContainer, containerOne, containerTwo, containerThree, dragItem) {
      $(dragItem).draggable(
          {              
              containment: mainContainer,
              helper: "clone",
              cursor: "move",
              drag: function (event, ui) {
                  $(ui.helper.prevObject).addClass("box_current");
              },                
              stop: function (event, ui) {
                  $(ui.helper.prevObject).removeClass("box_current");
              }                
          });
  
      $(containerTwo).droppable({
  
          accept: dragItem,
          activeClass: "ui-state-highlight",
          drop: function (event, ui) {
              acceptBoxIngalleryTwo(ui.draggable);
          }
  
      });
  
      $(containerOne).droppable({
          accept:dragItem,
          activeClass: "ui-state-highlight",
          drop: function (event, ui) {
              acceptBoxIngalleryOne(ui.draggable);
  
          }
  
      });
  
      $(containerThree).droppable({
          accept: dragItem,
          activeClass: "ui-state-highlight",
          drop: function (event, ui) {
              acceptBoxIngalleryThree(ui.draggable);
  
          }
  
      });
  
      function acceptBoxIngalleryTwo(item) {
          $(item).fadeOut(function () {
              $(containerTwo).append(item);
          });
         $(item).fadeIn();
          $(item).removeClass("box_current");
      }
  
      function acceptBoxIngalleryOne(item) {
          $(item).fadeOut(function () {
              $(containerOne).append(item);
          });
  
          $(item).fadeIn();
          $(item).removeClass("box_current");
      }
  
      function acceptBoxIngalleryThree(item) {
          $(item).fadeOut(function () {
              $(containerThree).append(item);
          });
  
          $(item).fadeIn();
          $(item).removeClass("box_current");
      }
  }
  </code></pre>
  
  <p>What i need is i have 3 div as gallery-one(source1),gallery-two(target),gallery-three(source2). I drag elements from source1 and source2 to target. When i drag those elements back to source divs from target div, it must check that dragged element was previously from source1 or source2 in such a way that source1 should not accept the tag from source2 and so. Please help! </p>
  
  <p>Thanks in advance.</p>