0

これがすでにどこかにある場合は申し訳ありませんが、しばらく探していましたが、何も見つかりませんでした。ページ上の絶対配置要素のxおよびy座標/オフセットを考慮して、その要素を相対的に配置された要素に変更する方法があるかどうかを知りたいのですが、同じ視覚的な場所にとどまり、そのDOM 内の場所。たとえば、このhtmlが与えられた場合

<div id="divOne"></div>
<div id="divTwo"></div>
<div id="divThree"></div>

divOne が絶対に配置され、その位置がたまたま divTwo と divThree の間に視覚的に収まる場合、x、y 位置を変換して、DOM の divOne の後と divTwo の前に配置するように jQuery に指示できる方法はありますか? 私は Javascript と jQuery に精通しています。私が知らないメソッド、または以前にこれに遭遇した可能性のある人からの回答を探しているだけです。

4

1 に答える 1

0

ドラッグされた div の絶対位置を削除することにより、そのタグを dom 内の別の場所に配置して再配置する必要があります。

たとえば、#divOne をドラッグして #divTwo と #divThree の間を視覚的に移動する場合、#divOne の絶対位置を削除し、そのタグを他の 2 つの div の間に移動する必要があります。

<div id="divTwo"></div>
<div id="divOne"></div>
<div id="divThree"></div>

明確に定義されたグリッドがある場合、これは機能します。

私があなただったら、再配置可能にしたいグリッド内の任意の div に標準クラスを与えることです。たとえば、クラス「arrangeable」。ドラッグエンドが発火したら、次の式を使用して、ドラッグした div を dom 内のどこに配置する必要があるかを計算します。

ドラッグされた div は、dom の別の場所に移動する必要があります。何が起こるかというと、ドラッグされた div が既存の div の代わりになり、その直後に既存の div が「プッシュ」されます。たとえば、#divOne を #divTwo と #divThree の間にドラッグすると、#divOne が #divThree の代わりになり、その後にプッシュされます。ドラッグされた div が既存の div の上にあるときにユーザーがドラッグを停止して左クリックを放したと仮定すると、ドラッグされた div によって場所が取られる (「pushedDiv」と名付けましょう)。 、ドラッグされたものをdomから削除し、認識されたものの直前に配置して、その位置を相対的にします。

どれが pushDiv であるかを認識するために、次のルーチンを使用できます。

//on drag end, where mouse has x and y coords:
var pushedDiv;
$(".arrangeable").each(function(index,value){
    var theoffset = $(this).offset();
    if(x >= theoffset .left && x <= theoffset .left + $(this).width() && y >= theoffset .top && y <= theoffset .top + $(this).height()){
         pushedDiv = $(this);
    }
});
// if pushedDiv is still null then the user didn't release the left click over a div of class "arrangeable". Else, the pushedDiv will be the one we are looking for
于 2013-07-11T20:36:11.780 に答える