沿对角线拖放？

Question

有没有拖放解决方案的示例，其中被拖动的元素只能沿着倾斜的线移动？例如，限制元素的可拖动性，使其只能沿着30º、10º等线移动。

我找到的大多数示例只将拖动的元素区域限制在垂直或水平线上，或者限制在更大的父div内部。

可能相关的是：沿着对角线线移动不超过100px，或者沿着曲线移动。

- Jason Hall

Answer 1

完整示例（仅适用于火狐浏览器）

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

- user187291

---

在你的 left 和 top 赋值中添加一些单位（"px"），这样就可以在所有浏览器中正常工作（只要页面上没有滚动条）。 - Crescent Fresh

Answer 2

看起来唯一真正做到这一点的方法，而不会真正让用户感到烦恼，就是跟踪从起始位置开始的角度，如果它们处于无效角度，则不设置droptarget。

这样，如果他们松开手，它会恢复到原始位置，并且唯一有效的放置位置符合您的要求。

- James Black

---

但这会假设任何不直接位于线条正上方的鼠标位置都是无效的（即，正如您所说，它形成了一个“无效角度”）。我认为这种限制实际上对用户体验有害，因为它需要精确控制鼠标。更有帮助的用户体验将从鼠标所在位置（当然，在一定的缓冲区域内）推断出“正确”的放置点，以帮助那些（我们中的大多数人？）不太擅长控制鼠标的人。 - Crescent Fresh

不，我的建议是你可以将被拖动的对象移动到任何你想要的地方，但是只有正确角度的对象会被突出显示，其他位置不会成为放置目标。因此，它会根据轮廓或通过某些反馈让用户知道哪里是有效的，从而提供指导，并且如果他们移动到其他地方，那么另一个有效的位置最终将被突出显示（轮廓）。 - James Black

Answer 3

如果您已经编写了自己的DnD处理程序，那么这似乎很容易做到。基本上，只有在动态定位可拖动元素时更改left或top CSS属性，才能将DnD移动限制为垂直或水平轴。

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

- Justin Johnson