title: jQuery draggable and droppable
body: <p>i want the AAA box to disable only when in the corresponding black AAA box.
  same with the BBB.</p>
  
  <p>my issues: example: when i drop AAA into AAA, it also lets me drop BBB into AAA and becomes disabled. I only want the draggable to disable when it is dropped in its corresponding black box.</p>
  
  <p>does anyone know how i can fix this or have a more efficient way of doing this? ultimately, i would like to make a puzzle through drag and drop.</p>
  
  <p><a href="http://jsfiddle.net/rlum01/UDqWb/1/" rel="nofollow">http://jsfiddle.net/rlum01/UDqWb/1/</a></p>
  
  <pre><code>$(function() {
  //Drag 1
  $( "#draggable" )
  .draggable({ snap: "#snap-one", snapMode: "inner", snapTolerance: 5 });
  //Drag 2
  $( "#draggable2" )
  .draggable({ snap: "#snap-two", snapMode: "inner", snapTolerance: 5 });  
  //Drop 1
  $( "#snap-one" ).droppable({
    drop: function( event, ui ) {
      var top = $('#draggable').css('top')
      ,left = $('#draggable').css('left');
          if (top === '-107px'){
              if(left === '0px'){
                  $(ui.draggable).draggable('disable');
                  if ($('#draggable').hasClass('ui-draggable-disabled')){
                  alert('hello');
                  }
              }
          }
    }
  });
  //Drop 2
  $( "#snap-two" ).droppable({
    drop: function( event, ui ) {
      var top = $('#draggable2').css('top')
      ,left = $('#draggable2').css('left');
          if (top === '-107px'){
              if(left === '0px'){
                  $(ui.draggable).draggable('disable');
  
              }
          }
    }
  });
  </code></pre>
  
  <p>});</p>
  
  <p>any advice is appreciated. thanks!</p>