jQuery draggable and droppable

Question

Я хочу, чтобы ящик AAA был отключен только в соответствующем черном поле AAA. с BBB.

мои проблемы: пример: когда я бросаю AAA в AAA, он также позволяет мне сбросить BBB в AAA и отключиться. Я просто хочу, чтобы draggable был отключен, когда он был сброшен в соответствующем черном ящике.

Кто-нибудь знает, как я могу исправить это или иметь более эффективный способ сделать это? в конечном счете, я хотел бы сделать головоломку через перетаскивание.

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

      } 
     } 
    } 
}); 

});

любой совет приветствуется. благодаря!

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.