trascinare e rilasciare
È possibile modificare l’ordine degli elementi di un documento HTML, utilizzando il Trascina l’evento. Di seguito arriva un esempio di base
la progettazione della pagina
Il layout della pagina per l’esempio seguente include:
un’area divs trascinata.
Tutti i div in quest’area hanno l’attributo draggable = "true". Questo è un attributo globale che indica che l’elemento può essere trascinato utilizzando la funzionalità dell’API Drag and Drop (Drag and Drop)
Zone di rilascio
Le zone allenenti sono elementi HTML (Divs in questo caso) in cui l’utente può far cadere gli elementi trascinati.
Eventi usati
L’evento drag viene attivato con una frequenza molto elevata, mentre un elemento HTML è guidato dall’utente
document.addEventListener("drag", function( event ) { //........}, false); L’evento dragstart scatti quando iniziamo a trascinare.
L’oggetto DataTransfer è usato per salvare le informazioni sull’oggetto trascinato. Utilizziamo DataTransfer.setData() per impostare il valore di questi dati.
document.addEventListener("dragstart", function( event ) { // guarda información acerca del objeto arrastrado event.dataTransfer.setData('text/plain',null) // guarda una referéncia del elemento arrastrado elemenyoArrastrado = event.target; // . . . . más cosas }, false); L’evento dragend viene attivato alla fine quando rilasciamo l’unità.
document.addEventListener("dragend", function( event ) { //. . . . . }, false);L’evento
div id = “8d206fbdad”>
spara quando il mouse che trascina un oggetto è sopra una zona di relatore. È importante impedire il comportamento predefinito dell’elemento trascinato, che è quello di tornare al tuo sito.
document.addEventListener("dragover", function( event ) { // previene el comportamiento por defecto del elemento arrastrado event.preventDefault(); }, false); L’evento dragenter Spreca quando il mouse che trascina un elemento entra nella zona relatore.
L’evento viene attivato quando il mouse che trascina un elemento lascia la zona di caduta.
document.addEventListener("dragleave", function( event ) { // comprueba si el event.target es una zona de soltar if ( event.target.className == "zona-de-soltar" ) { // y si lo és, reestablece el valor inicial event.target.style.background = ""; } }, false); L’evento drop viene attivato rilasciando l’elemento trascinato su una zona relativa “Se l’elemento trascinato è un collegamento, si apre in una nove pagina. Lo stesso accade se l’elemento trascinato è un’immagine (non un div con un’immagine). In modo che questo non succeda dobbiamo usare event.preventDefault();
document.addEventListener("drop", function( event ) { // Si el elemento arrastrado es un link, este se abre en una nueve página. // Para que esto no pase hay que utilizar: á event.preventDefault(); // comprueba si el event.target es una zona de soltar if ( event.target.className == "zona-de-soltar" ) { // reestablece el valor inicial para el background event.target.style.background = ""; // elimina el elemento arrastrado del del elemento padre elementoArrastrado.parentNode.removeChild( elementoArrastrado ); // y lo agrega al elemento de destino event.target.appendChild( elementoArrastrado ); } }, false);Vedi questo
Vedi questo Esempio in Codepen:
Vedi la forcella di trascinamento della penna di Gabi (@enxaneta) su Codepen.