1

jquery の学習を開始するために、ドラッグ アンド ドロップ ゲームを作成しました。すべてが機能しているように見えますが、同じ正方形に複数のアイテムをドロップできます. プレースホルダーに画像がある場合、ドロップ可能を無効にしたい。

私は調べました：

`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';
$('<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/ 赤い正方形の 1 つを大きなボックスにドラッグしてドロップします (ドロップされたことを示すために緑色に変わります)。1 つが中にある間は、このボックスに他のものをドロップすることはできません。それをドラッグして外に出します (削除されたことを示すために赤色に戻ります)。これで、他のものをその場所にドロップできます。

これの要点は、以下のコメントで説明したとおりです。アイテムをコンテナにドロップすると、コンテナがアイテムに関連付けられます。

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 に答える