javascript 画线连接div

Draw lines to connect divs

提问by Reuben

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

我目前有这个设置：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!!!

谢谢！！！

回答by Glenn Dayton

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

您应该考虑使用D3.js 库。特别是这个例子是我认为你正在寻找的：http: //mbostock.github.com/d3/ex/force.html

回答by Kevin Johnson

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

看看这个：jQuery - 使用画布在 div 之间画线

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

我将从该代码开始，并且每次divs 更改位置时都重新绘制线条。

回答by davidbuzatto

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

你也可以试试 KineticJS。我认为它会很容易地提供你想要的东西。http://www.kineticjs.com/

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

在这里你可以找到很多教程：http: //www.html5canvastutorials.com/kineticjs/html5-canvas-events-tutorials-introduction-with-kineticjs/

回答by tforrest

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.

您还可以尝试jsPlumb，这是一个可以将 div 连接在一起的 JavaScript 库。它使用起来非常简单，并且该页面上有很多演示。