我有一些我克隆的 div 可以拖放到一个区域中，现在，我想通过线连接 div，如果我移动 div，这条线也必须移动。类似于流程图的东西，我使用拖放克隆了 div，但仍然不知道如何执行此行。
谢谢！
【问题讨论】：
标签： javascript jquery
您可以使用 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' }
});
这应该建立连接器。如果你的 div 是可移动的，那么 onmove，调用 jsPlumb.repaint()
链接到 jsPlumb 演示 - https://jsplumbtoolkit.com Jsplumb 现在似乎已经付费了，（上面的修改链接）。但是他们确实有Community Edition
社区版 这是托管在 GitHub 上的开源 jsPlumb 项目，于 2010 年初首次创建。它是一种视图层技术，为您提供 API 以通过编程方式和鼠标/触摸事件建立 DOM 元素之间的连接。
社区版是免费的，并获得 MIT 或 GPL2 许可；您可以选择适合您需求的。
工具包版 Toolkit 版包含社区版，重点关注底层数据模型，以及一些有用的 UI 功能，例如布局和提供平移/缩放功能的小部件。它提供了一种以视觉连接为核心构建应用程序的快速方法。要更好地了解 Toolkit Edition 的功能，请查看一些演示或仔细阅读文档。
Toolkit Edition 具有针对每个开发人员的商业许可，可选择访问电子邮件支持（以及一年内对新发布版本的更新）。许可条款可在此处获得。立即使用此表单随时加入并购买许可证！
可以查看两个版本的路线图here。
【讨论】：
取两个 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
提示：
position:absolute;
line-height:1px;
border:solid 1px;
每次使用 jquery 移动 div 时重新绘制。
注意：如您所见，当 div 不平行时，总是有 2 条边靠近和 2 条边远离。
【讨论】：
我之前考虑过这一点，但我从来没有需要实际尝试实现它。试试这个：
创建一个透明的 GIF 或 PNG，其对角线从一个角延伸到另一个角。拖动 div 时，拉伸图像，使其角始终接触每个 div。您可能需要一个对角向下的图像和一个对角向上的图像，并根据两个 div 的相对位置在两者之间切换。
这可能需要一些技巧才能使其正常工作，但在 HTML 中获得对角线是我能想到的最好的事情。
【讨论】：