是否有任何拖放解决方案的示例,其中被拖动的元素只能沿倾斜线移动?例如,限制元素的可拖动性,使其只能沿30º线或10º等移动.
Are there any examples of a drag-and-drop solution in which the elements being dragged can only move along a slanted line? For example, constrain an element's draggability so that it can only be moved along a 30º line, or 10º, etc.
在大多数示例中,我只能将拖动的元素的面积限制为垂直或水平线,或者限制在较大的父div内.
Most examples I've been able to find only constrain the dragged element's area to either a vertical or horizontal line, or to within a larger parent div.
可能相关:沿着对角线拖动不超过100像素或沿着曲线拖动.
Possibly related: Drag along a diagonal line no further than 100px, or along a curve.
推荐答案完整示例(仅适用于FF)
complete example (FF only)
<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>