任务是: 当我从容器中拖动元素时,我需要显示与元素相连的容器。当我放下元素时 - 行消失。所以我只需要一些建议或链接来寻找解决方案。(我使用 js,angularjs)。
<div layout='row'
<div dragula='"first-bag"'>container1
<div>
Item1
</div>
</div>
<div dragula='"first-bag"'>container2
</div>
</div>
最佳答案
一个好的方法是在两个元素之间创建一个 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 并在其上绘制一条曲线。
关于javascript - 拖动元素时如何查看容器和拖动元素之间的线?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41101378/