jQuery draggable and droppable

Question

i want the AAA box to disable only when in the corresponding black AAA box. same with the BBB.

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.

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.

http://jsfiddle.net/rlum01/UDqWb/1/

$(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');

            }
        }
  }
});

});

any advice is appreciated. thanks!

Answer 1

Use the accept property.

$( "#snap-one" ).droppable({
  accept: "#draggable",
  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');
                }
            }
        }
  }
});

Heres your altered fiddle.