1

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

我调查过：

`greedy: true`

这会禁用 drop 但我不确定如何再次启用它，并且：

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

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

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

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

  for ( var i=0; i<=19; i++ ) {
  var images = 'images/slot' + slotNumbers[i] + '.jpg';
$('<div class="placeholder"><div class="img-slot"></div></div>').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); 
   }
 }
4

1 回答 1

5

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

$(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
       }
   }
于 2012-09-28T11:57:50.907 回答