禁用下降,如果格已经下降了吗?(Disable drop if div has already be

2019-09-23 04:25发布

我创建了一个阻力,以开始自学jQuery的下降游戏。 一切似乎都在工作,但你可以将多个项目在同一广场。 我想禁用可放开如果占位符中有一个图像。

我已经研究过:

`greedy: true`

禁用下降,但我不知道再怎么也启用它:

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

我可以得到这些都禁用下降,但不知道我怎么得到,如果块/图像恢复到原来的位置或移动到另一个方形他们再次启用它。

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

UPDATE:这是可放开插槽的代码。

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

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
       }
   }


文章来源: Disable drop if div has already been dropped?