2012-02-10 16 views
32

私は、バックグラウンドテーブルのすべてのセルにドロップできる非常に長いドラッグ可能な要素を持っています。JQuery UI:要素の真ん中ではなく、カーソル位置に長い要素をドロップ

この種の要素をドラッグすると、ドロップ可能なコンテナ(テーブルのセル)が表示され、要素がどこにドロップされるのかを知る「ホット」ポイントは、それ自身の中間です。

残念ながら、私の要素の真ん中が目に見えない場合があり、要素を適切な場所にドロップすることは有用ではありません。

要素の真ん中ではなく、要素がドロップされるコンテナを選択するカーソル位置を指定できますか?

私は本当に立ち往生しており、本当に助けに感謝します。

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

おかげで

+0

(元の画像がドラッグをクローンよりも大きい場合にのみ必要)カーソルに画像を相対的に設定することができますか? –

+0

こんにちは、ここに私の問題を描くためのサンプルコードです。黄色のdivは、長すぎるために細胞に簡単にドロップできません。 http://jsbin.com/upunek/edit – sdespont

答えて

54

私はあなたが探しているものだと思い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

+1

ありがとうございます!これはまさに私が探していたものです!私はすべての "draggable"オプションを使って長い間検索しましたが、 "droppable"オプションは検索しませんでした...それは私の一日を過ごす^ _^ – sdespont

+1

おかげさまで助けてくれました。 +1 – Mike

0

ジェームズ・モンターニュで述べたように、公差はあなたがこのために必要なものです。さらに、droppableの場合はcursorAtを使用できます。これは、あなたがあなたの現在のコードを投稿することができ

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

関連する問題