Перетаскивать по диагонали?

Question

Существуют ли примеры решения для перетаскивания, в котором перетаскиваемые элементы могут перемещаться только по наклонной линии? Например, ограничьте перетаскивание элемента, чтобы его можно было перемещать только вдоль линии 30º или 10º и т. Д.

Большинство примеров, которые мне удалось найти, ограничивают область перетаскиваемого элемента либо вертикальной, либо горизонтальной линией, либо внутри более крупного родительского элемента.

Возможно, связано: перетащите по диагонали не более 100 пикселей или вдоль кривой.

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

Казалось бы, единственный способ действительно сделать это, не раздражая пользователя, - это отслеживать угол от начальной точки, и если они находятся под неправильным углом, не устанавливайте цель сброса.

Таким образом, если они отпустят его, он вернется к исходному положению, и единственные допустимые места, куда можно уронить, соответствуют вашим требованиям.

Answer 3

Это кажется простым, если вы написали свой собственный обработчик DnD. По сути, перемещение DnD, ограниченное либо вертикальной, либо горизонтальной осями, работает только путем изменения атрибутов CSS left или top при динамическом размещении перетаскиваемого элемента.

Вы можете использовать эту же идею, чтобы настроить это сдержанное поведение. Вместо простого перевода (X, Y) текущей позиции мыши для элемента CSS left / right, вы можете использовать X для left и получить right, передав его через линейную функцию, например y = mx + b.