在两个元素之间绘制连接线 [已关闭]

jsPlumb是一个支持拖放的选项，正如其众多演示所看到的那样，包括流程图演示。

它以免费社区版本和付费工具包版本提供。

Toolkit 版本使用全面的数据绑定层包装社区版本，以及用于为流行库构建应用程序和集成的多个 UI 小部件，并已获得商业许可。

用svgs连接行对我来说值得一试，而且它完美地工作......首先，可缩放矢量图形（SVG）是一种基于XML的矢量图像格式，用于二维图形，支持交互性和动画。SVG 图像及其行为在 XML 文本文件中定义。您可以使用标签在HTML中创建一个svg。Adobe Illustrator是用于使用路径创建复杂svgs的最佳软件之一。<svg>

使用一行连接两个 div 的过程：

1. 创建两个 div，并根据需要为它们提供任何位置

   <div id="div1" style="width: 100px; height: 100px; top:0; left:0; background:#e53935 ; position:absolute;"></div>
   <div id="div2" style="width: 100px; height: 100px; top:0; left:300px; background:#4527a0 ; position:absolute;"></div>
   

   （为了解释，我正在做一些内联样式，但制作一个单独的css文件进行样式设置总是好的）

2. <svg><line id="line1"/></svg>

   线标签允许我们在两个指定的点（x1，y1）和（x2，y2）之间画一条线。（有关参考，请访问w3schools。我们还没有指定它们。因为我们将使用jQuery来编辑行标签的属性（x1，y1，x2，y2）。

3. 在标签写入中<script>

   line1 = $('#line1');   
   div1 = $('#div1');   
   div2 = $('#div2');
   

   我使用选择器来选择两个div和行...

   var pos1 = div1.position();
   var pos2 = div2.position();
   

   jQuery方法允许我们获取元素的当前位置。有关更多信息，请访问 https://api.jquery.com/position/（您也可以使用方法）position()offset()

现在，当我们获得所需的所有位置时，我们可以绘制如下线...

line1
  .attr('x1', pos1.left)
  .attr('y1', pos1.top)
  .attr('x2', pos2.left)
  .attr('y2', pos2.top);

jQuery 方法用于更改所选元素的属性。.attr()

我们在上面的行中所做的就是将行的属性从

x1 = 0
y1 = 0
x2 = 0
y2 = 0

自

x1 = pos1.left
y1 = pos1.top
x2 = pos2.left
y2 = pos2.top

由于返回两个值，一个是“left”，另一个是“top”，我们可以使用对象（此处为pos1和pos2）使用.top和.left轻松访问它们...position()

现在，行标签有两个不同的坐标，用于在两点之间绘制线条。

提示：根据需要添加事件侦听器

提示：在脚本标记中写入任何内容之前，请确保先导入jQuery库

通过JQuery添加坐标后...它看起来像这样

以下代码片段仅用于演示目的，请按照上述步骤获取正确的解决方案

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="div1" style="width: 100px; height: 100px; top:0; left:0; background:#e53935 ; position:absolute;"></div>
<div id="div2" style="width: 100px; height: 100px; top:0; left:300px; background:#4527a0 ; position:absolute;"></div>
<svg width="500" height="500"><line x1="50" y1="50" x2="350" y2="50" stroke="red"/></svg>