Arrossegar i deixar anar
És possible canviar l’ordre dels elements d’un document html, utilitzant l’esdeveniment drag . A continuació ve un exemple bàsic
El disseny de pàgina
El disseny de pàgina per al següent exemple inclou:
Una zona de divs arrossegables.
Tots els divs d’aquesta zona tenen l’atribut draggable = "true". Aquest és un atribut global que indica que l’element pot ser arrossegat utilitzant la funcionalitat de l’API Drag and Drop (arrossegar i deixar anar )
unes zones de deixar anar
Les zones d’deixar anar són uns elements HTML (divs en aquest cas) on l’usuari pot deixar anar els elements arrossegats.
Esdeveniments utilitzats
l’esdeveniment drag es dispara amb una freqüència molt alta, mentre que un element HTML està arrossegat per l’usuari
document.addEventListener("drag", function( event ) { //........}, false); L’esdeveniment dragstart es dispara quan vam començar a arrossegar.
L’objecte DataTransfer s’utilitza per guardar informació sobre l’objecte arrossegat. Utilitzem DataTransfer.setData() per establir el valor d’aquestes dades.
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’esdeveniment dragend es dispara a al final quan deixem anar l’element arrossegat.
document.addEventListener("dragend", function( event ) { //. . . . . }, false); l’esdeveniment dragover es dispara quan el ratolí que arrossega un element està damunt d’una zona de deixar anar. És important prevenir el comportament per defecte de l’element arrossegat, que és el de tornar al seu lloc.
document.addEventListener("dragover", function( event ) { // previene el comportamiento por defecto del elemento arrastrado event.preventDefault(); }, false); L’esdeveniment dragenter es dispara quan el ratolí que arrossega un element entra a la zona de deixar anar.
document.addEventListener("dragenter", function( event ) { // comprueba si el event-target es una zona de soltar if ( event.target.className == "zona-de-soltar" ) { // y en este caso cambia el color de fondo event.target.style.background = "purple"; } }, false); l’esdeveniment dragleave es dispara quan el ratolí que arrossega un element surt de la zona de deixar anar.
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’esdeveniment drop es dispara a l’deixar anar l’element arrossegat sobre d’una zona de deixar anar a Si l’element arrossegat és un link, aquest s’obre a una nòu pàgina. El mateix passa si l’element arrossegat és una imatge (no un div amb una imatge). Perquè això no passi hem d’utilitzar 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);Vegeu aquest exemple en codepen:
Veure the Pen drag FORK by Gabi (@enxaneta) on CodePen.