Trascinare e rilasciare lungo una linea diagonale?

Question

Esistono esempi di una soluzione di trascinamento della selezione in cui gli elementi trascinati possono muoversi solo lungo una linea inclinata? Ad esempio, vincola la trascinabilità di un elemento in modo che possa essere spostato solo lungo una linea di 30º, o 10º, ecc.

La maggior parte degli esempi sono riuscito a trovare solo vincolare l'area dell'elemento trascinato a una linea verticale o orizzontale , o all'interno di un div genitore più grande.

Possibilmente correlato: trascinare lungo una linea diagonale non superiore a 100 px o lungo una curva.

Answer 1

esempio completo (solo 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

Sembrerebbe che l'unico modo per farlo davvero, senza realmente infastidire l'utente, è quello di tenere traccia dell'angolo dalla posizione di partenza e, se sono in un angolo non valido, non impostare il droptarget.

In questo modo, se lasciano andare, ritorna alla posizione originale e gli unici posti validi da eliminare soddisfano le proprie esigenze.

Answer 3

Questo sembra facile da fare se hai scritto il tuo gestore DnD. Fondamentalmente, il movimento DnD vincolato agli assi verticali o orizzontali funziona cambiando solo gli attributi left o top CSS quando si posiziona dinamicamente l'elemento trascinabile.

È possibile utilizzare questa stessa idea per personalizzare questo comportamento sobrio. Invece, basta tradurre (X, Y) della posizione corrente del mouse per il CSS left/, è possibile utilizzare la X per lo left e derivare il right passando attraverso una funzione lineare come y = mx + b.