在两个可拖动的div之间绘制一条线

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (129)

我想要的是:我有两个可拖动的div,并在它们之间有一个连接器(一条直线)(用SVG线绘制)。当我移动这些可拖动的div时,我需要相应地在它们之间移动连接器。我的问题更类似于问题3,但在那个问题中,一旦用户创建了div之间的连接,那些div停止拖动,所以他们不关心刷新连接器。

有没有人遇到过我所说的任何工作示例或演示?或者,有没有人可以给我任何关于如何以最佳方式做到这一点的想法?

以防万一,我正在使用jQuery作为一个JavaScript框架(如果值得知道的话)。

提问于
用户回答回答于
用户回答回答于

首先,可缩放矢量图形(SVG)是一种基于XML的矢量图像格式,用于支持交互性和动画的二维图形。SVG图像及其行为在XML文本文件中定义。你可以使用<svg>标签在HTML中创建一个SVG 。Adobe Illustrator是用于使用路径创建复杂svgs的最佳软件之一。

使用一行连接两个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 = div1.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()方法用于更改所选元素的属性。

我们在上面做的所有事情是我们改变了行的属性

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

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

作为position()返回两个值,一个'左'和其他'顶部',我们可以使用.top和.left使用对象(这里是pos1和pos2)轻松访问它们...

现在线标记有两个不同的坐标来绘制两点之间的线。

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

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

扫码关注云+社区

领取腾讯云代金券