0

誰もが知っていますか、私はドロップ可能なアイテムにスナップすることになっているドラッグ可能なアイテムを持っています。私はそれを機能させていますが、私が理解できないように見えるのは、ドラッグ可能なオブジェクトをドロップ可能なオブジェクトにドロップした後、左側から少し外れるように整列させたいということです。下の画像のように。

jQuerysのドラッグ可能/ドロップ可能オブジェクトでこれを行う方法を知っている人はいますか？

アップデート

これが、オブジェクトがドロップされたときの関数です。

function handleCardDrop( event, ui ) {
  var slotNumber = $(this).data( 'number' );
  var cardNumber = ui.draggable.data( 'number' );

  // If the card was dropped to the correct slot,
  // change the card colour, position it directly
  // on top of the slot, and prevent it being dragged
  // again
  //alert("Slot number: "+slotNumber+"\n Card Number: "+cardNumber);

  //alert(cardNumber+":"+slotNumber);
  if(cardNumber==slotNumber)
  {
      correctCards++;
  }

    ui.draggable.addClass( 'correct' );
    ui.draggable.draggable( 'disable' );

    ui.draggable.addClass( 'correct' );
    ui.draggable.draggable( 'disable' );
    $(this).droppable( 'disable' );

    ui.draggable.css({'cursor':'default'});
    ui.draggable.position( { of: $(this), my: 'left top', at: 'left top' } );
    ui.draggable.draggable( 'option', 'revert', false );
}

ここに画像の説明を入力してください

4

1 に答える 1

2

私はこれを達成する方法を考え出しました。本当に必要なのはoffset（）関数だったのに、position（）関数を使用していました。これは、ポジショニングに使用したコードのスニペットです。ドラッグ可能なオブジェクトの高さは少し小さいので、上部のサイズを計算してから2で割って、オブジェクトの中央に配置します。次に、ドラッグ可能なオブジェクトの半分に設定して、ドロップ可能なオブジェクトから外します。

    var off = $( this ).offset();
    off.top += (($( this ).height() - ui.draggable.height())/2);
    off.left -= ui.draggable.width()/2;

    ui.draggable.offset( off );
于 2013-01-23T15:53:04.337 に答える