jQuery：可拖动以下行：视觉“链接这两件事”指示器

Posted 2023-03-25

【中文标题】jQuery：可拖动以下行：视觉“链接这两件事”指示器

【英文标题】：jQuery: draggable with following line: a visual "link these two things" indicator

【发布时间】：2021-10-11 17:21:11

【问题描述】：

在 Adob​​e AfterEffects 中，您可以使用“育儿”工具将图层相互链接。 （我想这就是它的名称，已经有一段时间了。）您单击并按住图标，然后将其拖到目的地。作为视觉指示器，它从父级到鼠标指针绘制一条线。

可拖动/可放置/辅助图标...我已经掌握了所有这些。我找不到相关信息（主要是因为我找不到可以到达那里的 Google 搜索词）是如何绘制一条线，该线在一端锚定，而另一端跟随鼠标指针。

更新：html5 Canvas 可能不是办法，因为它完全覆盖了它下面的所有内容。所以我回到第 1 格。

显示最终产品外观的图片：

【问题讨论】：

There's a great solution here，使用 SVG。

【参考方案1】：

There's a great solution here，使用 SVG。我还将发布作者@Ani 的代码。

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

创建两个 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 文件总是好的）

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

线标签允许我们在两个指定点（x1，y1）和（x2，y2）之间画一条线。 （作为参考，请访问 w3schools。）我们尚未指定它们。因为我们将使用 jQuery 来编辑 line 标签的属性 (x1,y1,x2,y2)。

在标签中写入

line1 = $('#line1');   
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() 方法用于改变被选元素的属性。

我们在上面一行所做的只是改变了行的属性

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）轻松访问它们

现在线标签有两个不同的坐标来在两点之间画线。