今朝、jQuery のドラッグ可能で奇妙な問題が発生しました。他の誰かがこれに遭遇したのではないかと思います。
大きなdivの中に小さなdivがたくさんあります。クラスの CSS で「position:absolute」を指定すると、実際の位置自体が計算され、必要に応じて JS で設定されます。
現在、これらの div をドラッグ可能にする機能を追加しています。
しかし、ドラッグ可能にするとすぐに、要素に直接 "position:relative" が与えられ、ご想像のとおり、画面上の位置が大幅に台無しになります。
このように「位置」を変更する理由や、そうしないように指示する方法を知っている人はいますか?
編集：
かなり明白な答えが私をじっと見つめていることに気付きました - !私の立場にとって重要: 絶対! これで治りそうです。しかし、このように「位置：相対」を設定する理由を誰かが知っている場合（そして、設定可能にすることも、位置が必要かどうかを最初に確認することもしない）、まだ興味があります...私が保存したばかりの問題は何だろうと思っています自分のために;-)
「今日、同じ問題に遭遇しました。その理由はdraggable()、動的に作成された要素に適用していたからです。「後で」それを に追加していました。 (スタイルがクラスによって適用されている場合)適用時にdom要素が含まれている必要があります。短く、 が付いている位置が見つからない場合は、 を追加します。」- ジャシュワントdomdraggable()elementrelative
最初に行うこと:.append(jElement)次に:jElement.draggable()
何らかの理由で、Jashwant は質問へのコメントに回答を入れました。だから、ここに再投稿するのが他の人にとって便利だと思いました。
それは私にも起こりましたが、Chrome でのみ発生しました。理由？
次のようでした。
$("#div-popup").draggable({ handle: ".top", containment: 'document'});
次に、次のように包含パラメーターを削除しました。
$("#div-popup").draggable({ handle: ".top"});
つまり、ブラウザ (この場合は Chrome) についてです。要素をドラッグ可能にするコンテインメントを指定すると、位置が相対に設定されます。
私の場合、スタイルシートとJavaScriptの読み込みの間の競合状態のようです...
ドキュメント ヘッドの javascript の後にスタイルシートを含めるという間違いを犯したことに気付きました。$(document).ready()ブラウザによって読み込まれる CSS を考慮していないため、JavaScript の前に含める必要があります: https://stackoverflow.com/a/1324720/3633109