Question

是否存在拖放解决方案的示例，其中被拖动的元素只能沿着斜线移动？例如，约束元素的可拖动性，使其只能沿30º线或10º等移动。

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

可能相关：沿对角线拖动不超过100px，或沿曲线拖动。

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>

Answer 2

看起来真正做到这一点的唯一方法就是从起始位置跟踪角度，如果它们处于无效角度，则不要设置droptarget。

这样，如果他们放手，它会恢复到原来的位置，唯一有效的地方可以满足您的要求。

Answer 3

如果您编写了自己的DnD处理程序，这似乎很容易。基本上，限制为垂直轴或水平轴的DnD运动仅通过在动态定位可拖动元素时更改left或top CSS属性来工作。

您可以使用相同的想法来自定义此限制行为。而只是翻译元素的CSS left / right的当前鼠标位置的（X，Y），您可以使用X作为left并导出right通过像y = mx + b这样的线性函数传递它。

沿对角线拖放？

3 个答案: