沿对角线拖放?

本文介绍了沿对角线拖放?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

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