1

I currently have this set up: http://sandbox.brightboxstudios.com/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!!!

Reuben
  • 2,701
  • 6
  • 31
  • 47
  • Possible duplicate of [Drawing a line between two draggable divs](https://stackoverflow.com/questions/6278152/drawing-a-line-between-two-draggable-divs) – balupton Nov 05 '18 at 20:42

4 Answers4

3

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

Glenn Dayton
  • 1,410
  • 2
  • 20
  • 38
  • This seems way beyond what I'm looking for :/ Not even really sure how to integrate it.. Thanks :) – Reuben Aug 22 '12 at 03:20
2

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.

Community
  • 1
  • 1
Kevin Johnson
  • 913
  • 7
  • 24
  • well, I just looked and it seems like the redraw works by calling `redrawCanvas()` in javascript – Kevin Johnson Aug 21 '12 at 12:11
  • Sorry, how do I implement that command? Still learning :) Thanks!! – Reuben Aug 21 '12 at 14:46
  • You probably want to read [this page](http://www.w3schools.com/js/js_events.asp) on events. It should explain how to run javascript code when something happens in the browser. I'm not sure exactly what event you want to use though... – Kevin Johnson Aug 21 '12 at 22:19
  • I found the drag event under jQuery draggable, though don't know how to incorporate it into the code you linked in your answer.. http://docs.jquery.com/UI/Draggable#event-drag – Reuben Aug 22 '12 at 02:21
  • try `$( "canvas" ).bind( "drag", function(event, ui) { redrawCanvas(); });` Don't forget to include the jQuery library, and if you have more than one canvas on the page, change the `"canvas"` to something more specific, i.e.: `"canvas#linecanvas"`, that will match all canvases with an ID of "linecanvas" – Kevin Johnson Aug 22 '12 at 12:21
1

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

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

davidbuzatto
  • 9,207
  • 1
  • 43
  • 50
1

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.

tforrest
  • 11
  • 1