0

私はこのような一般的なHTMLを持っています

<div>
    <span>Item 1</span>
    <span>Item 2</span>
    <span>Item 3</span>
    <span>Item 4</span>
</div>

また、メールで行う方法と同様に、テキスト エディターで画像をドラッグして単語の間にドロップできるように、各項目をドラッグして順序を変更できるように、ドラッグして順序を変更する機能を実装する必要があります。 iOSまたはMac Dockで、ただしテキスト付き。

このように: http://img5.imageshack.us/img5/1921/v57sibdzorpefuaqozisso.mp4

ここに画像の説明を入力

ユーザーが何かをドラッグして順序を変更すると、実際の DOM がその順序になる必要があり、position:absolute.

私が持っていた最初のアイデアは、要素を持ち上げて絶対位置に配置し、座標を計算し、ドロップすると、他の要素との相対位置を計算してから元にposition:relative戻すことでした。

しかし、それが良いアプローチかどうかはわかりませんし、実装も単純ではありません。そして、それは私がエレガントな解決策と考えるものではなく、ぎくしゃくすることを心配しています。

私は jquery よりもバニラの JavaScript の方が好きですが、独自の JavaScript を実装するのに役立ちます。

私はすでにjavascriptでドラッグアンドドロップを実装しましたが、絶対配置要素に対しては相対配置要素では機能しません。

アイデアお待ちしております。

http://jsfiddle.net/Victornpb/BWU3m/

4

1 に答える 1

0

absoluteあなたのイメージは1つのことを示唆しているのに対し、あなたのフィドルは異なる動作をするため(あなたが言った要素を持つもの)、ドラッグ可能なものをどのように動作させたいかは完全には明らかではありません。ここでは、画像のようにドキュメント内でドラッグできるようにしたいと考えています。

相対配置要素と絶対配置要素にはいくつかの違いがあります。どちらもそれらに依存しますoffsetParent(必ずしもではありませんparentNode)。ただし、relative要素では、別の値を指定しない限り、上/左のオフセットは常に 0 (またはそれ自体に対する要素の距離) です。要素の左/上オフセットは、上/左端absoluteに対する要素の距離です。offsetParent

したがって、すべてのSPANs はleft:0,top:0オフセットで始まるため (マージンなどをカウントしない場合)、offsetParent適用する必要がある左/上の値を計算するときに、要素のサイズと元のオフセットを考慮する必要があります。ネガティブ。

初期化したら、originalOffset後でアクセスできるようにどこかに保存します。

x次のようにする必要があります。

(clientX - originalOffset - width)

次に、x内にあることを確認します

(-originalOffset) .. (offsetParentWidth - width - originalOffset)

も同様ですyが、軸を変更します。

考慮すべきもう 1 つのことは、インライン要素にはclientWidth/Height.

これは、私が上で述べた変更のフィドルです。DIV 内にドラッグを含めたい場合は、DIV をoffsetParent.

于 2013-06-24T18:35:19.467 に答える