title: Drag and drop with matching using JQuery
body: <p>I have 9 draggable elements and 9 slots.  5 of the draggable elements need to match their own slots.  The other 4 elements need to be droppable on any of the remaining 4 slots...it doesn't matter which of the four slots they are dropped on.  </p>
  
  <p>The following code is working for the 5 draggable elements that have unique matches on 5 of the slots, but the 4 others (<code>#element_2</code>) allow only one draggable. Any ideas how I can make the <code>#element_2</code> draggable elements (all 4 of them) match any of the <code>#slot_2</code> droppable slots?</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
  &lt;title&gt;Assay - Overview&lt;/title&gt;
  &lt;meta http-equiv="Content-Type" content="text/html;charset=utf-8"&gt;
  &lt;link rel="stylesheet" type="text/css" href="style.css"&gt;
  &lt;script type="text/javascript" src="jquery.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="jquery-ui.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  
  $(init);
  
  function init() {
  
  
      $('#element_1').data( 'number', 1 ).attr( 'id', 'card'+1 ).draggable( {
        containment: '#content',
        stack: '#cardPile div',
        cursor: 'move',
        revert: true
      } );
  
          $('#element_2').data( 'number', 2 ).attr( 'id', 'card'+2 ).draggable( {
        containment: '#content',
        stack: '#cardPile div',
        cursor: 'move',
        revert: true
      } );
  
          $('#element_3').data( 'number', 3 ).attr( 'id', 'card'+3 ).draggable( {
        containment: '#content',
        stack: '#cardPile div',
        cursor: 'move',
        revert: true
      } );
  
          $('#element_2').data( 'number', 2 ).attr( 'id', 'card'+2 ).draggable( {
        containment: '#content',
        stack: '#cardPile div',
        cursor: 'move',
        revert: true
      } );
  
          $('#element_5').data( 'number', 5 ).attr( 'id', 'card'+5 ).draggable( {
        containment: '#content',
        stack: '#cardPile div',
        cursor: 'move',
        revert: true
      } );
  
          $('#element_2').data( 'number', 2 ).attr( 'id', 'card'+2 ).draggable( {
        containment: '#content',
        stack: '#cardPile div',
        cursor: 'move',
        revert: true
      } );
  
          $('#element_7').data( 'number', 7 ).attr( 'id', 'card'+7 ).draggable( {
        containment: '#content',
        stack: '#cardPile div',
        cursor: 'move',
        revert: true
      } );
  
          $('#element_2').data( 'number', 2 ).attr( 'id', 'card'+2 ).draggable( {
        containment: '#content',
        stack: '#cardPile div',
        cursor: 'move',
        revert: true
      } );
  
          $('#element_9').data( 'number', 9 ).attr( 'id', 'card'+9 ).draggable( {
        containment: '#content',
        stack: '#cardPile div',
        cursor: 'move',
        revert: true
      } );
  
  
    // Create the element slots
  
      $('#slot_1').data( 'number', 1 ).droppable( {
        accept: '#cardPile div',
        hoverClass: 'hovered',
        drop: handleCardDrop
      } );
  
          $('#slot_2').data( 'number', 2 ).droppable( {
        accept: '#cardPile div',
        hoverClass: 'hovered',
        drop: handleCardDrop
      } );
  
          $('#slot_3').data( 'number', 3 ).droppable( {
        accept: '#cardPile div',
        hoverClass: 'hovered',
        drop: handleCardDrop
      } );
  
          $('#slot_2').data( 'number', 2 ).droppable( {
        accept: '#cardPile div',
        hoverClass: 'hovered',
        drop: handleCardDrop
      } );
  
          $('#slot_5').data( 'number', 5 ).droppable( {
        accept: '#cardPile div',
        hoverClass: 'hovered',
        drop: handleCardDrop
      } );
  
          $('#slot_2').data( 'number', 2 ).droppable( {
        accept: '#cardPile div',
        hoverClass: 'hovered',
        drop: handleCardDrop
      } );
  
          $('#slot_7').data( 'number', 7 ).droppable( {
        accept: '#cardPile div',
        hoverClass: 'hovered',
        drop: handleCardDrop
      } );
  
          $('#slot_2').data( 'number', 2 ).droppable( {
        accept: '#cardPile div',
        hoverClass: 'hovered',
        drop: handleCardDrop
      } );
  
          $('#slot_9').data( 'number', 9 ).droppable( {
        accept: '#cardPile div',
        hoverClass: 'hovered',
        drop: handleCardDrop
      } );
  }
  
  function handleCardDrop( event, ui ) {
    var slotNumber = $(this).data( 'number' );
    var cardNumber = ui.draggable.data( 'number' );
  
    if ( slotNumber == cardNumber ) {
      ui.draggable.addClass( 'correct' );
      ui.draggable.draggable( 'disable' );
      $(this).droppable( 'disable' );
      ui.draggable.position( { of: $(this), my: 'left top', at: 'left top' } );
      ui.draggable.draggable( 'option', 'revert', false );
    } 
  }
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="content"&gt;
    &lt;div id="cardPile"&gt; 
    &lt;div id="element_3"&gt;Harvest Cells for Virus stock generation&lt;/div&gt;
    &lt;div id="element_2"&gt;Maintain Cell Line&lt;/div&gt;
    &lt;div id="element_9"&gt;Freeze Cell Line for long term storage&lt;/div&gt;
    &lt;div id="element_2"&gt;Maintain Cell Line&lt;/div&gt;
    &lt;div id="element_5"&gt;Harvest Cells for TCID50&lt;/div&gt;
    &lt;div id="element_2"&gt;Maintain Cell Line&lt;/div&gt;
    &lt;div id="element_7"&gt;Harvest Cells for Microneut&lt;/div&gt;
    &lt;div id="element_1"&gt;Establish Cell Line&lt;/div&gt;
    &lt;div id="element_2"&gt;Maintain Cell Line&lt;/div&gt; 
    &lt;/div&gt;
    &lt;div id="cardSlots"&gt; 
    &lt;div id="slot_1" style="position: absolute; left: 797px; top: 223px;"&gt;&lt;/div&gt;
    &lt;div id="slot_2" style="position: absolute; left: 958px; top: 281px;"&gt;&lt;/div&gt;
    &lt;div id="slot_3" style="position: absolute; left: 1044px; top: 428px;"&gt;&lt;/div&gt;
    &lt;div id="slot_2" style="position: absolute; left: 1015px; top: 597px;"&gt;&lt;/div&gt;
    &lt;div id="slot_5" style="position: absolute; left: 884px; top: 709px;"&gt;&lt;/div&gt;
    &lt;div id="slot_2" style="position: absolute; left: 712px; top: 708px;"&gt;&lt;/div&gt;
    &lt;div id="slot_7" style="position: absolute; left: 580px; top: 600px;"&gt;&lt;/div&gt;
    &lt;div id="slot_2" style="position: absolute; left: 550px; top: 430px;"&gt;&lt;/div&gt;
    &lt;div id="slot_9" style="position: absolute; left: 637px; top: 281px;"&gt;&lt;/div&gt; 
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>