Javascript 当我拖动项目时，如何查看容器和被拖动元素之间的线？

任务是： 当我从容器中拖动项目时，我需要显示带有项目的行连接容器。当我放下项目时，行消失了。所以，我只需要一些建议或链接，在哪个方向寻找解决方案。（我使用js，angularjs）

一个好方法是在两个元素之间创建一个画布元素，并在其上绘制一条曲线：

CSS

JS

这里我假设你有两个元素，from是曲线开始的元素，to是曲线到达的位置（Dragable元素）

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);

这将在两个元素之间创建画布并在其上绘制曲线

工作示例：
你需要bèzier曲线还是直线？另外，你可以使用js吗？我可以使用js.angularjs.bèzier曲线-need。如果不可能，我们可以使用直线。谢谢。你确定它有效吗？你可以使用一些工作示例吗？拖动时我看不到直线item@Serhiy我一到家就把它修好了
.curveCanvas {
    position: absolute;
    background-color: rgba(0, 0, 0, 0);
}

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);