问在两个元素之间画一条连接线

EN

从其numerous demos (包括Flowchart demo )可以看出，jsPlumb是一个支持拖放的可用选项。

它有免费的社区版和付费的工具包版本。

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

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

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

need

• <svg><line id="line1"/></svg>时，

1. 创建两个div，并为它们提供任意位置

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

• in <script> tag write

line1 = $('# div1 ')；div1=$(‘#DIV1’)；div2 = $('#div2')；

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

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

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

现在我们已经获得了我们需要的所有位置，我们可以像下面这样画一条线…

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

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

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

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

至

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

由于position()返回两个值，一个是'left‘，另一个是'top'，我们可以使用.top和.left通过对象(这里是pos1和pos2)轻松地访问它们……

现在，line标签有两个不同的坐标来在两点之间绘制直线。

提示:在需要div时添加事件侦听器

提示:在脚本标记中写入任何内容之前，请确保先导入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>

​

最近，我试图开发一个简单的web应用程序，它使用拖放组件，并用线将它们连接起来。我偶然发现了这两个简单而令人惊叹的javascript库：

1. Plain Draggable：简单和高性能的库，允许超文本标记语言/SVG元素被dragged.
2. Leader Line：在你的网页中画一条引线

Working example link (用法:单击add scene创建一个可拖动对象，单击add choice在两个不同的可拖动对象之间绘制一条引线)