拖动项目时如何查看容器和拖动元素之间的行？

Question

任务是： 当我从容器中拖动项目时，我需要显示与项目相关的行连接容器。当我丢弃项目 - 行消失。所以我只需要一些建议或指向寻找解决方向的链接。（我使用js，angularjs）。

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

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

Answer 1

好的方式是在2个元素之间创建一个canvas元素并在其上绘制一条曲线：

CSS

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

JS

这里我假设你有两个元素，从曲线开始的元素开始到曲线所在的元素（可拖动元素。

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

这会在2个元素之间创建一个画布，并在其上绘制一条曲线。

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