时间戳

首页 > 解决方案 > jQuery：可拖动以下行：视觉“链接这两件事”指示器

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

问题描述

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

Draggable/droppable/helper icon...我已经得到了所有这些。我找不到的信息——主要是因为我找不到到达那里的谷歌搜索词——是如何绘制一条在一端锚定而另一端跟随鼠标指针的线。

更新：HTML5 Canvas 可能不是办法，因为它完全覆盖了它下面的任何东西。所以我回到第一方格。

图片显示最终产品的外观：用视觉指示器养育两个项目

标签： javascriptjqueryhtml5-canvas

解决方案

这里有一个很棒的解决方案，使用 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 来编辑行标签的属性 (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）

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

推荐阅读