I've got two floating divs which can be re-positioned by the user using drag and drop. I want to draw a line between the two divs and have it adjust itself (size and positions) to the movements of the divs.

The goal is to get some sort of chartflow/diagram alike construction within the browser.

What would be the best method to do this?

I've got two floating divs which can be re-positioned by the user using drag and drop. I want to draw a line between the two divs and have it adjust itself (size and positions) to the movements of the divs.

The goal is to get some sort of chartflow/diagram alike construction within the browser.

What would be the best method to do this?

• javascript
• html
• css

• Can you post some kind of example of what you're trying to achieve, and also, what have you tried to implement to solve this problem? – Brandon Buck Commented Jul 1, 2012 at 19:02

4 Answers 4

If you're going to do anything more than very basic drawing/figures, then I would remend a drawing library such as RaphaelJS. It greatly simplifies things for you. See an example: http://jsfiddle/sveinatle/RVykE/1/

That example is not a perfect implementation, but it shows how much help you get from Raphael.

JS Plumb:

http://jsplumb/jquery/demo.html

SVG, Canvas, or VML

Jquery, Mootools, or YUI

Here's a version using just HTML, jQuery and some trigonometry!
Still needs a bit of tweaking but it's mostly there.

http://jsfiddle/gKj35/2/

I can think of three ways:

1. you can use svg
2. you can use html canvas
3. you can use pure html( divs with height = 1 will be horizontal lines, and divs with width = 1 will be vertical lines). You can bine these lines to create a line segment.