web-dev-qa-db-ja.com

JQuery UI：要素の中央ではなくカーソル位置に長い要素をドロップします

背景テーブルのすべてのセルにドロップできる非常に長いドラッグ可能な要素がいくつかあります。

この種の要素をドラッグし始めると、ドロップ可能なコンテナ（テーブルのセル）にカーソルを合わせると、要素がドロップされる場所を知るための「ホット」ポイントはそれ自体の中央になります。

残念ながら、私の要素の中央はしばしば見えず、要素を正しい場所にドロップすることは役に立ちません。

カーソル位置を指定して、要素の中央ではなく要素をドロップするコンテナを選択することはできますか？

私は本当に行き詰まっていて、どんな助けにも本当に感謝します。

こんにちは、これが私の問題を説明するためのサンプルコードです。黄色のdivは長すぎるため、セルに簡単にドロップできません。 jsbin.com/upunek/edit

ありがとう

jqueryjquery-uidrag-and-dropjquery-ui-draggable
32
sdespont

あなたが探しているのはtoleranceだと思います。 "pointer"を使用することをお勧めします。これは、マウスカーソルを「オーバーラップ」ポイントとして使用するためです。

http://jqueryui.com/demos/droppable/

$('[id^="cell-"]').each(function(index) {
  $(this).droppable({
  accept: ".cartridge",
  hoverClass: "cell-highlght",
    tolerance: "pointer",
  drop: function( event, ui ) {
    $( this ).addClass( "cell-dropped" );
  }
  });
});

http://jsbin.com/upunek/2/edit

55
James Montagne

James Montagneが述べたように、これには耐性が必要です。その上、droppableの場合はcursorAtを使用できます。これは、カーソルを基準にして画像を設定するのに役立ちます（元の画像がドラッグしたクローンよりも大きい場合にのみ必要です）

http://api.jqueryui.com/draggable/#option-cursorAt

0
Pieter Venter