Arrastre y suelte a lo largo de una línea diagonal?

Question

¿Hay algún ejemplo de una solución de arrastrar y soltar en la que los elementos que se arrastran solo puedan moverse a lo largo de una línea inclinada? Por ejemplo, limite la capacidad de arrastre de un elemento para que solo se pueda mover a lo largo de una línea de 30º o 10º, etc.

La mayoría de los ejemplos que he podido encontrar solo restringen el área del elemento arrastrado a una línea vertical u horizontal , o dentro de un div principal más grande.

Posiblemente relacionado: arrastre a lo largo de una línea diagonal no más allá de 100px, o a lo largo de una curva.

Answer 1

ejemplo completo (FF solamente)

<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

Parecería que la única manera de hacerlo realmente, sin molestar realmente al usuario, es realizar un seguimiento del ángulo desde la ubicación inicial, y si están en un ángulo no válido, entonces no configure el droptarget.

De esta forma, si lo sueltan, vuelve a la posición original y los únicos lugares válidos para soltar cumplen con sus requisitos.

Answer 3

Esto parece fácil de hacer si ha escrito su propio controlador DnD. Básicamente, el movimiento DnD que está restringido a ejes axiales u horizontales funciona solo cambiando los atributos CSS left o top al posicionar dinámicamente el elemento arrastrable.

Puede utilizar esta misma idea para personalizar este comportamiento restringido. En lugar de simplemente traducir la (X, Y) de la posición actual del mouse para CSS del elemento left/right, puede usar la X para el left y derivar el right pasándolo a través de una función lineal como y = mx + b.