Arrastrar y soltar

facebook-svg gplus-svg twitter-svg

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:

See the Pen drag FORK by Gabi (@enxaneta) on CodePen.