javascript - 2 つのフローティング div の間に線を作成し、動きに合わせて調整します

Question

ユーザーがドラッグ アンド ドロップを使用して再配置できる 2 つのフローティング div があります。2 つの div の間に線を引き、それ自体 (サイズと位置) を div の動きに合わせて調整したいと考えています。

目標は、ブラウザ内である種のチャートフロー/ダイアグラムに似た構造を取得することです。

これを行うための最良の方法は何ですか？

Answer 1

非常に基本的な描画/図以外のことを行う場合は、RaphaelJS などの描画ライブラリをお勧めします。それはあなたのために物事を大幅に簡素化します。例を参照してください: http://jsfiddle.net/sveinatle/RVykE/1/

この例は完璧な実装ではありませんが、Raphael からどれだけの助けが得られるかを示しています。

Answer 2

これは、HTML、jQuery、およびいくつかの三角法のみを使用したバージョンです!
まだ少し微調整が必​​要ですが、ほとんどあります。

http://jsfiddle.net/gKj35/2/

Answer 3

JS プラム:

http://jsplumb.org/jquery/demo.html

SVG、キャンバス、または VML

Jquery、Mootools、または YUI

Answer 4

私は3つの方法を考えることができます：

1. svgを使用できます
2. HTMLキャンバスを使用できます
3. 純粋なhtmlを使用できます（高さ= 1のdivは水平線になり、幅= 1のdivは垂直線になります）。これらの線を組み合わせて、線分を作成できます。