jQuery draggable和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.