javascript - 拖动元素时如何查看容器和拖动元素之间的线？

Question

任务是:当我从容器中拖动元素时，我需要显示与元素相连的容器。当我放下元素时 - 行消失。所以我只需要一些建议或链接来寻找解决方案。(我使用 js，angularjs)。

<div layout='row'
  <div dragula='"first-bag"'>container1
     <div>
        Item1 
     </div>
  </div>

  <div dragula='"first-bag"'>container2
  </div>
</div>

Answer 1

一个好的方法是在两个元素之间创建一个 Canvas 元素并在其上画一条曲线:

CSS

.curveCanvas {
    position: absolute;
    background-color: rgba(0, 0, 0, 0);
}

JS

这里我假设你有 2 个元素，from 是曲线开始的元素，to 是曲线到达的地方(可拖动元素。

var from = document.getElementById("from");
var to = document.getElementById("to");

// Create the canvas element
var c = document.createElement("canvas");

c.style.top = from.offsetTop + "px";
c.style.left = (from.offsetLeft + from.offsetWidth) + "px";
c.style.width = (c.width = to.offsetLeft - from.offsetLeft - from.offsetWidth) + "px";
c.style.height = (c.height = to.offsetTop - from.offsetTop) + "px";
c.className = "curveCanvas";

// Draw the curve

var ctx = c.getContext("2d");
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.bezierCurveTo(c.width / 2, 0, c.width / 2, c.height, c.width, c.height);
ctx.stroke();

document.body.appendChild(c);

这会在两个元素之间创建一个 Canvas 并在其上绘制一条曲线。

工作示例:https://jsfiddle.net/d7s9w6k4/