Arrastrar y soltar
Es posible cambiar el orden de los elementos de un documento html, utilizando el evento drag. A continuación viene un ejemplo básico
El diseño de página
El diseño de página para el siguiente ejemplo incluye:
Una zona de divs arrastrables.
Todos los divs de esta zona tienen el atributo draggable = "true". Este es un atributo global que indica que el elemento puede ser arrastrado utilizando la funcionalidad del API Drag and Drop ( arrastrar y soltar )
Unas zonas de soltar
Las zonas de soltar son unos elementos HTML ( divs en este caso ) donde el usuario puede soltar los elementos arrastrados.
Eventos utilizados
El evento drag se dispara con una frecuencia muy alta, mientras que un elemento HTML está arrastrado por el usuario
document.addEventListener("drag", function( event ) {
//........
}, false);
El evento dragstart se dispara cuando empezamos a arrastrar.
El objeto DataTransfer se utiliza para guardar información acerca del objeto arrastrado. Utilizamos DataTransfer.setData() para establecer el valor de estos 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);
El evento dragend se dispara al final cuando soltamos el elemento arrastrado.
document.addEventListener("dragend", function( event ) {
//. . . . .
}, false);
El evento dragover se dispara cuando el ratón que arrastra un elemento está encima de una zona de soltar. Es importante prevenir el comportamiento por defecto del elemento arrastrado, que es el de volver a su sitio.
document.addEventListener("dragover", function( event ) {
// previene el comportamiento por defecto del elemento arrastrado
event.preventDefault();
}, false);
El evento dragenter se dispara cuando el ratón que arrastra un elemento entra en la zona de soltar.
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);
El evento dragleave se dispara cuando el ratón que arrastra un elemento sale de la zona de soltar.
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);
El evento drop se dispara al soltar el elemento arrastrado encima de una zona de soltar
Si el elemento arrastrado es un link, este se abre en una nueve página. Lo mismo pasa si el elemento arrastrado es una imagen ( no un div con una imagen ). Para que esto no pase tenemos que utilizar 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);
Vea este ejemplo en codepen: