如果div已被删除，请禁用drop？

我已经创建了一个拖放游戏，以便开始自学jquery。 一切似乎都在起作用，但你可以将多个项目放在同一个方格上。 如果占位符中有图像，我想禁用droppable。

我调查过：

`greedy: true` 

这会禁用掉线，但我不知道如何再次启用它，还有：

 $(this).droppable( 'disable' ); 

如果块/图像恢复到原始位置或移动到另一个方块，我可以得到这两个来禁用掉落但不确定如何让它们再次启用它。

完整版： http ： //creativelabel.co.uk/drag-and-drop/

更新：这是可放置插槽的代码。

  for ( var i=0; i<=19; i++ ) { var images = 'images/slot' + slotNumbers[i] + '.jpg'; $('
').attr('id', 'slot'+slotNumbers[i]).data( 'slotNumbers', slotNumbers[i] ).appendTo( '#imgSlots' ).droppable( { accept: '#images img', hoverClass: 'hovered', drop: handleDropEvent, activate: handleDragEvent }); 

这是drop:事件代码：

  function handleDropEvent( event, ui ) { var slotNumber = $(this).data( 'slotNumbers' ); var imgNumber = ui.draggable.data( 'number' ); ui.draggable.addClass( 'dropped' ); $(this).droppable( 'disable' ); ui.draggable.position( { of: $(this), my: 'right top', at: 'right top' } ); if ( slotNumber == imgNumber ) { ui.draggable.addClass( 'img-match' ); ui.draggable.data("valid", true); imgMatch++; } else { if(ui.draggable.data("valid")) { imgMatch--; ui.draggable.data("valid", false); } } 

activate:代码：

  function handleDragEvent( event, ui ) { $(this).droppable( 'enable' ); if(ui.draggable.data("valid")) { imgMatch--; $('input[name=Score]').val(imgMatch); $('#score h1').text(imgMatch); ui.draggable.data("valid", false); } } 

Answer 1

文档 （在“方法”选项卡下查看）表示禁用您使用：

 $(this).droppable( 'disable' ); 

并使您能够使用

 $(this).droppable( 'enable' ); 

---

更新：检查此实例： http ： //jsfiddle.net/QqJRs/将其中一个红色方块拖到大方框中并将其放下（它变为绿色以指示其被丢弃）。 当一个人在里面时，你不能把任何其他人丢到这个盒子里。 现在拖出一个（它返回红色表示已删除）。 现在你可以放弃其他任何一个。

这就是我在下面的评论中所描述的; 当您在容器中放置项目时，将容器与项目关联：

 drop: function(event,ui){ ui.draggable.addClass( 'dropped' ); // taken from your code & I used to change color ui.draggable.data('droppedin',$(this)); // associate the container $(this).droppable('disable'); // disable the droppable } 

然后再次拖动它时，取消关联并重新启用：

 drag: function(event,ui){ if($(this).data('droppedin')){ $(this).data('droppedin').droppable('enable'); v// re-enable $(this).data('droppedin',null); // de-associate $(this).removeClass( 'dropped' ) // remove class } }