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.