沿对角线拖放? [英] Drag and Drop along a diagonal line?

问题描述

是否有任何拖放解决方案的示例，其中被拖动的元素只能沿倾斜线移动?例如，限制元素的可拖动性，使其只能沿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>

这篇关于沿对角线拖放?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！