web-dev-qa-db-ja.com

Jquery UIは相対的ではなく絶対的にドラッグ可能ですか?

いくつかのjqueryドラッグ可能オブジェクトを含むdivがありますが、いずれかの時点でこれらのドラッグ可能オブジェクトの1つをページから削除すると、相対位置にある残りのドラッグ可能オブジェクトを移動できます。

これを紹介するフィドルは次のとおりです。 http://jsfiddle.net/VolatileStorm/aNk6e/

私が提案する解決策は、ドラッグ可能オブジェクトを相対配置ではなく絶対配置で使用することですが、これを行う方法が見つかりません。これを行う方法はありますか?そうでない場合は、誰かがそれを回避する方法を考えることができますか? (優雅さのために、私は「他のドラッグ可能なものを削除しないでください」を受け入れません)。

20
VolatileStorm

position:absolute が機能しないのはなぜですか?

絶対的に配置された要素はドキュメントフローの一部ではなくなったため、3つの<div>はそれぞれ、含まれている(配置された)要素の0,0に配置されます。したがって、 ドラッグ可能なオブジェクトの開始位置を計算する はあなた次第です。

17
josh3736
  1. 追加 position:absoluteあなたの要素に。
  2. それらをDOMにアタッチしますbefore call .draggable
17
Paul Draper

要素をドラッグ可能に設定するときにjQuerycss関数を使用して、位置を絶対値に設定できます。

$(this).draggable().css("position", "absolute");
9
SeanK

おそらく最良のアイデアではありませんが... positon:relative;を使用して、関連するすべてのdivを配置できます。次に、または$( "document")。ready()に関数呼び出しを含めます。これは、jQueryを使用している場合は、各divを反復処理して相対位置を絶対位置に変換し、それらを左、上に設定します。それらをposition:absoluteに変更します。ここでの唯一の問題は、反復によってレイアウトが変更されないように、スタイルを更新する前に各divの絶対位置が必要なことです。

0
CBusBus