在兩個浮動div之間創建一條線並調整爲運動

Question

我有兩個浮動div，可以由用戶使用拖放操作重新定位。 我想在兩個div之間劃一條線，讓它調整自己（大小和位置）到div的移動。

目標是在瀏覽器中獲得某種類似於chartflow/diagram的結構。

什麼是最好的方法來做到這一點？

Answer 1

我能想到的方式有三種：

1. 你可以使用SVG
2. 您可以使用HTML畫布
3. 你可以使用純HTML（隨高度的div = 1將橫線， 和寬度= 1的div將是垂直線）。您可以合併這些線條以創建線段。

Answer 2

如果你打算做任何超過非常基本圖紙/圖形，那麼我會推薦一個繪圖庫，如RaphaelJS。它大大簡化了你的事情。看到一個例子：http://jsfiddle.net/sveinatle/RVykE/1/

這個例子不是一個完美的實現，但它顯示了從Raphael獲得多少幫助。

Answer 3

JS普拉姆：

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

SVG，帆布，或VML

了jQuery，Mootools和YUI

Answer 4

下面是一個使用版本只是HTML，jQuery和一些三角學！
仍然需要一些調整，但它主要是在那裏。

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