javascript 如何连接可拖动的div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4684568/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to connect draggable divs
提问by rafaeltn
I have some divs that I clone and can drag and drop in a area, now, I want to connect by lines the divs and if I move the divs, this lines must move too. Something like a flow diagram, I clone the divs using drag and drop, but still don't know how to do this lines.
我有一些我克隆的 div，可以在一个区域中拖放，现在，我想通过线连接 div，如果我移动 div，这条线也必须移动。类似于流程图的东西，我使用拖放来克隆 div，但仍然不知道如何执行此行。
Thanks!
谢谢！
回答by Krishna
you can use jsplumb library to achieve this. if you have two divs, div1 and div2,
您可以使用 jsplumb 库来实现这一点。如果你有两个 div，div1 和 div2，
var endpointOptions = { isSource:true, isTarget:true };
var div1Endpoint = jsPlumb.addEndpoint('div1', { anchor:"TopCenter" }, endpointOptions );
var div2Endpoint = jsPlumb.addEndpoint('div2', { anchor:"BottomCenter" }, endpointOptions );
jsPlumb.connect({
source:div1Endpoint,
target:div2Endpoint,
connector: [ "Bezier", 175 ],
paintStyle:{ lineWidth:5, strokeStyle:'red' }
});
this should establish the connectors. if your divs are movables, then onmove, make a call to jsPlumb.repaint()
这应该建立连接器。如果你的 div 是可移动的，那么 onmove，调用 jsPlumb.repaint()
Link to jsPlumb demo - https://jsplumbtoolkit.comJsplumb seems to have become paid now, (revised link above). However they do have a Community Edition
链接到 jsPlumb 演示 - https://jsplumbtoolkit.comJsplumb 现在似乎已付费（修改上面的链接）。但是他们确实有社区版
Community EditionThis is the open source jsPlumb project hosted on GitHub that was first created in early 2010. It is a view layer technology that provides you with an API to establish connectivity between DOM elements, both programmatically and via mouse/touch events.
社区版这是托管在 GitHub 上的开源 jsPlumb 项目，于 2010 年初首次创建。它是一种视图层技术，可为您提供 API 以通过编程方式和通过鼠标/触摸事件在 DOM 元素之间建立连接。
The Community Edition is free, and is licensed with an MIT or GPL2 license; you choose whichever suits your needs.
社区版是免费的，并获得 MIT 或 GPL2 许可；您选择适合您的需求。
Toolkit EditionThe Toolkit Edition wraps the Community edition with a focus on the underlying data model, as well as several useful UI features such as layouts, and a widget that offers pan/zoom functionality. It provides a fast way of building applications with visual connectivity at their core. To get a better feel for the capabilities of the Toolkit Edition, take a look through some of the demos or peruse the documentation.
Toolkit 版Toolkit 版包装了社区版，重点关注底层数据模型，以及一些有用的 UI 功能，例如布局和一个提供平移/缩放功能的小部件。它提供了一种构建以视觉连接为核心的应用程序的快速方法。要更好地了解 Toolkit Edition 的功能，请查看一些演示或仔细阅读文档。
The Toolkit Edition has a commercial, per-developer, license with optional access to email support (plus updates to new released versions for a year). License terms are available here. Feel free to jump in and buy a license right now using this form!
Toolkit Edition 具有针对每个开发人员的商业许可证，可以选择访问电子邮件支持（以及一年内对新发布版本的更新）。许可条款可在此处获得。随时使用此表格立即加入并购买许可证！
Roadmaps for both editions can be viewed here.
可以在此处查看两个版本的路线图。
回答by Caspar Kleijne
take two divs, divA and divB.
calculate the shortest distance between the closest borders of the divs
determine the middle coordinates of those closest sides of each div eg:
A: {x:10, y:10}
B: {x:20: y:10}
determine the intersection-point of lines from those points (C) C = AX, BY or AY,BX (depending on divA and divB positions)
create two divs, that represent AC and BC
取两个 div，divA 和 divB。
计算div的最近边界之间的最短距离
确定每个 div 的最近边的中间坐标，例如：
答：{x:10, y:10}
B: {x:20: y:10}
从这些点确定线的交点 (C) C = AX, BY 或 AY,BX（取决于 divA 和 divB 位置）
创建两个 div，分别代表 AC 和 BC
tip:
小费：
position:absolute;
line-height:1px;
border:solid 1px;
repaint every time you move the divs with jquery.
每次使用 jquery 移动 div 时都重新绘制。
note: as you can see, there are always 2 sides close and 2 sides far when the divs are not parallel.
注意：如您所见，当 div 不平行时，总是有 2 边靠近和 2 边远离。
回答by Jeff
I've thought about this before but I've never had a need to actually try to implement it. Try this:
我以前考虑过这个问题，但我从来没有需要实际尝试实施它。试试这个：
Create a transparent GIF or PNG that has a diagonal line running from one corner to another. As you drag the divs around, stretch the image so that it's corners are always touching each div. You will probably need a diagonal-down image and a diagonal-up image and switch between the two based on the relative positioning of the two divs.
创建一个透明的 GIF 或 PNG，其中有一条从一个角到另一个角的对角线。当您四处拖动 div 时，请拉伸图像，使其边角始终接触每个 div。您可能需要一张对角向下的图像和一张对角向上的图像，并根据两个 div 的相对位置在两者之间切换。
This will probably take some finesse to get it working well, but it is the best thing that I can think of to get diagonal lines in HTML.
这可能需要一些技巧才能使其正常工作，但在 HTML 中获取对角线是我能想到的最好的方法。
