0

我希望 AAA 框仅在相应的黑色 AAA 框中禁用。与 BBB 相同。

我的问题： 示例：当我将 AAA 放入 AAA 时，它也让我将 BBB 放入 AAA 并被禁用。我只希望将可拖动对象拖放到相应的黑匣子中时禁用它。

有谁知道我该如何解决这个问题或有更有效的方法来做到这一点？最终，我想通过拖放制作一个谜题。

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

            }
        }
  }
});

});

任何建议表示赞赏。谢谢！

4

1 回答 1

1

使用接受属性。 

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

这是你改过的小提琴。

于 2013-09-05T14:14:40.103 回答