Varie librerie JavaScript, come l'interfaccia utente jQuery, offrono interazioni drag-and-drop in cui è possibile effettuare il constrain the movement dell'elemento trascinato su un singolo asse o all'interno di un'area specifica.Come limitare il movimento quando si utilizza il trascinamento della selezione HTML5 nativo?
Questo genere di cose è possibile utilizzando l'API nativa HTML5 drag and drop?
È completamente diverso! L'interfaccia utente di jQuery trascina e rilascia lo spostamento dell'elemento (con le proprietà CSS in alto e a sinistra) nella pagina.
L'API di trascinamento HTML5 nativo consente solo di spostare un "fantasma" dell'elemento trascinabile (ovviamente, è possibile nascondere l'elemento originale mentre si trascina il fantasma).
L'API viene fornito con a lot of event ma no, non è possibile vincolare la posizione del mouse in modo da non poter vincolare a un singolo asse (perché il fantasma segue la posizione del mouse, anche se il mouse lascia la pagina (ma l'evento potrebbe probabilmente smettere di funzionare)).
+1, ho aggiornato il collegamento da W3Schools a MDN per evitare che questo diventi l'argomento della domanda. –
Non mi sono mai collegato a W3schools, era qualcuno che ha modificato la mia domanda. Questo sito è zoppo. – callum
Il collegamento a w3schools deve essere considerato un crimine. – artistoex
possibile duplicato di [HTML5: trascina/rilascia sull'asse X e senza dissolvenza?] (Http://stackoverflow.com/questions/8933513/html5-drag-drop-on-x-axis-and-without-fade) – SiliconMind
So che questo è un vecchio post ... ma ho risolto questo creando un elemento clone su 'dragstart', nascondendo l'originale, e quindi impostando la posizione del clone con l'evento' dragover' - dove può essere vincolato. Non molto diverso dall'uso di 'mousemove'. È stato più facile che cancellare completamente il trascinamento della selezione - che sono sicuro che molti hanno. – mseifert