I currently have this set up: /

They are draggable and I am trying to find a way to have lines connect them, even when they are dragged. Having an easy way to show how each is related and which should be connected is ideal!

Thanks!!!

I currently have this set up: http://sandbox.brightboxstudios./orgmap/

They are draggable and I am trying to find a way to have lines connect them, even when they are dragged. Having an easy way to show how each is related and which should be connected is ideal!

Thanks!!!

• javascript
• jquery
• html

• Possible duplicate of Drawing a line between two draggable divs – balupton Commented Nov 5, 2018 at 20:42

4 Answers 4

You should consider using the D3.js library. In particular this example is what I think you are looking for: http://mbostock.github./d3/ex/force.html

Take a look at this: jQuery - use canvas to draw lines between divs

I'd start with that code, and just re-draw the lines every time the divs change location.

You may try KineticJS too. I think that it will provide what you want easily. http://www.kineticjs./

Here you can find lots of tutorials: http://www.html5canvastutorials./kineticjs/html5-canvas-events-tutorials-introduction-with-kineticjs/

You can also try jsPlumb, a JavaScript library that can connects divs together. It's really simple to use and there are plenty of demos on that page.