javascript - 沿对 Angular 线拖放？

Question

是否有任何拖放解决方案的示例，其中被拖动的元素只能沿斜线移动？例如，限制元素的可拖动性，使其只能沿 30º 线或 10º 等移动。

我能找到的大多数示例仅将拖动元素的区域限制为垂直线或水平线，或者限制在较大的父 div 内。

可能相关:沿着不超过 100 像素的对 Angular 线或曲线拖动。

Answer 1

完整示例(仅限 FF)

<div id="drag" style="position:absolute;width:20px;height:20px;background:red"></div>
<script>
var angle = 10;
window.onload = function() 
{
    var d = document.getElementById("drag");
    d.onmousedown = function() {
        document.onmouseup = function() {
            document.onmousemove = null;
        }
        document.onmousemove = function(e) {
            d.style.left = e.clientX;
            d.style.top = e.clientX * Math.tan(angle * Math.PI / 180);
        }
    }
}
</script>