arrastrar e soltar
É posible cambiar a orde dos elementos dun documento HTML, usando o Arrastre o evento. Abaixo vén un exemplo básico
o deseño da páxina
O deseño da páxina para o seguinte exemplo inclúe:
unha área de divs arrastrada.
Todas as divs nesta área teñen o atributo draggable = "true". Este é un atributo global que indica que o elemento pode ser arrastrado usando a funcionalidade da API de arrastrar e soltar (arrastrar e soltar)
zonas de liberación
As zonas soltas son elementos HTML (DIVS neste caso) onde o usuario pode deixar caer os elementos arrastrados.
eventos usados
O evento drag desencadea cunha frecuencia moi alta, mentres que un elemento HTML está impulsado polo usuario
document.addEventListener("drag", function( event ) { //........}, false); O evento dragstart brotes cando comezamos a arrastrar.
O obxecto DataTransfer úsase para gardar información sobre o obxecto arrastrado. Usamos DataTransfer.setData() para configurar o valor destes datos.
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); O evento dragend desencadea ao final cando soltamos a unidade.
document.addEventListener("dragend", function( event ) { //. . . . . }, false);O evento
DIV id = “8d206fbdad”>
cando o rato que arrastra un elemento está por riba dunha zona relese. É importante evitar o comportamento predeterminado do elemento arrastrado, que é para volver ao seu sitio.
document.addEventListener("dragover", function( event ) { // previene el comportamiento por defecto del elemento arrastrado event.preventDefault(); }, false); O evento dragenter Broxe cando o rato que arrastra un elemento entra na zona relertal.
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); O evento dragleave está activado cando o rato que arrastra un elemento deixa a zona de caída.
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); O evento drop é desencadeado lanzando o elemento arrastrado nunha zona relese
se o elemento arrastrado é unha ligazón, ábrese nunha páxina de nove. O mesmo ocorre se o elemento arrastrado é unha imaxe (non unha div cunha imaxe). Para que isto non suceda, temos que usar 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);ver isto Exemplo en Codepen:
Ver a bifurcación de arrastre de pluma por Gabi (@enxaneta) en codepen.