TODO SOBRE INFORMÁTICA Y TECNOLOGÍA




Cómo hacer Drag and Drop en HTML 5 y JavaScript API

En HTML 5 podemos hacer que casi cualquier elemento de nuestra página se pueda arrastrar.


Primero creamos contenido arrastrable

En la mayoría de los navegadores, las selecciones de texto, las imágenes y los enlaces se pueden arrastrar de forma predeterminada, por ejemplo, si arrastra un enlace en una página web.
verá un pequeño cuadro con un título y una URL, puede soltar este cuadro en la barra de direcciones o en el escritorio para crear
un atajo o para navegar hasta el enlace.

Para hacer que otros tipos de contenido se puedan arrastrar, debe usar las API de arrastrar y soltar de HTML5.

La propiedad arrastrable si se establece en verdadero, hace que un objeto se pueda arrastrar.
Cualquier cosa puede ser habilitada para arrastrar: imágenes, archivos, enlaces, archivos o cualquier marca en su página.

El siguiente ejemplo que le mostraré le permite arrastrar y soltar el logotipo de dzosoft o el texto de div a otro

Descargar este ejemplo


Paso 1
Necesitamos seis elementos (div) con el mismo estilo, por ejemplo el estilo 'box' declarado (CSS) en la siguiente ventana:

<!DOCTYPE html>
<html>
<head>
	<style>
		.box {
		  border: 1px solid #666;
		  background-color: #fff;
		  border-radius: .9em;
		  padding: 1px;
		  cursor: move;
		  width: 200px;
		  height: 200px;
		  display: flex; 
		  align-items: center;
		  justify-content: center;
		}

		.box.over {
		  border: 3px dotted #666;
		}
	</style>
</head>
<body>
	<table>
	  <tr>
	  <td>
		  <div draggable="true" class="box">
			<img src="https://www.dzosoft.com/image/dzosoft_1.jpg"/>
		  </div>
	  </td>
	  <td>
		  <div draggable="true" class="box">
		  </div>
	  </td>
	  <td>
		  <div draggable="true" class="box">
			www.DZOSOFT.com
		  </div>
	  </td>
	 </tr>
	 <tr>
	  <td>
		<div draggable="true" class="box">
 		 <img src="https://www.dzosoft.com/image/dzosoft_2.jpg"/>
		</div>
	  <td>
		<div draggable="true" class="box">
		</div>
	  </td>
	  <td>
		<div draggable="true" class="box">
 		 <img src="https://www.dzosoft.com/image/dzosoft_3.jpg"/>
		</div>
	  </td>
	 </tr> 
	</table> 
</body>
</html>

<!DOCTYPE html>
<html>
<head>
	<style>
		.box {
		  border: 1px solid #666;
		  background-color: #fff;
		  border-radius: .9em;
		  padding: 1px;
		  cursor: move;
		  width: 200px;
		  height: 200px;
		  display: flex; 
		  align-items: center;
		  justify-content: center;
		}

		.box.over {
		  border: 3px dotted #666;
		}
	</style>
</head>
<body>
	<table>
	  <tr>
	  <td>
		  <div draggable="true" class="box">
			<img src="https://www.dzosoft.com/image/dzosoft_1.jpg"/>
		  </div>
	  </td>
	  <td>
		  <div draggable="true" class="box">
		  </div>
	  </td>
	  <td>
		  <div draggable="true" class="box">
			www.DZOSOFT.com
		  </div>
	  </td>
	 </tr>
	 <tr>
	  <td>
		<div draggable="true" class="box">
 		 <img src="https://www.dzosoft.com/image/dzosoft_2.jpg"/>
		</div>
	  <td>
		<div draggable="true" class="box">
		</div>
	  </td>
	  <td>
		<div draggable="true" class="box">
 		 <img src="https://www.dzosoft.com/image/dzosoft_3.jpg"/>
		</div>
	  </td>
	 </tr> 
	</table> 
</body>
</html>


Ponemos el logo de dzosoft con diferentes colores en tres elementos y el texto en otro elemento.
En este punto, encontrará que puede arrastrar los elementos, sin embargo, no sucederá nada más.


Paso 2

Para agregar la funcionalidad de arrastrar y soltar, necesitamos usar la API de JavaScript.


Escuchar eventos de arrastre

Hay una serie de eventos diferentes a los que adjuntar para monitorear todo el proceso de arrastrar y soltar.

arrastrar
arrastrar
dragagente
hoja de arrastre
arrastre
soltar
dragón

Para manejar el flujo de arrastrar y soltar, necesita algún tipo de elemento de origen y un destino (un área para atrapar la caída).
El elemento fuente puede ser una imagen, una lista, un enlace, un objeto de archivo, un bloque de HTML, etc.
( No todos los elementos pueden ser objetivos, por ejemplo, una imagen no puede ser un objetivo).


Iniciar y finalizar un arrastrar y soltar


Ahora adjuntamos todos los controladores de eventos para iniciar la secuencia de arrastrar y soltar para cada elemento.

  document.addEventListener('DOMContentLoaded', (event) => {

  function handleDragStart(e) {  //Inicio de arrastre
    dragSrcEl = this;

	e.dataTransfer.effectAllowed = 'move';
	e.dataTransfer.setData('text/html', this.innerHTML);
  }

  function handleDragEnd(e) {  //Arrastre Fin

    items.forEach(function (item) {
      item.classList.remove('over');
    });
  }

  function handleDragOver(e) {  //Arrastrar sobre
    e.preventDefault();
    return false;
  }

  function handleDragEnter(e) {   //Arrastrar Entrar
    this.classList.add('over');
  }

  function handleDragLeave(e) {    //Arrastrar dejar
    this.classList.remove('over');
  }
  
  function handleDrop(e) {          //Caída de inicio   
   e.stopPropagation();
  if (dragSrcEl !== this) {
    dragSrcEl.innerHTML = this.innerHTML;
    this.innerHTML = e.dataTransfer.getData('text/html');
  }

  return false;
}

  //Aquí agregamos todos los eventos a cada elemento con el estilo'box'
  let items = document.querySelectorAll('.box'); 
  
  items.forEach(function(item) {
    item.addEventListener('dragstart', handleDragStart);
    item.addEventListener('dragover', handleDragOver);
    item.addEventListener('dragenter', handleDragEnter);
    item.addEventListener('dragleave', handleDragLeave);
    item.addEventListener('dragend', handleDragEnd);
    item.addEventListener('drop', handleDrop);
  });
});
</script>

  document.addEventListener('DOMContentLoaded', (event) => {

  function handleDragStart(e) {  <font color="white">//Inicio de arrastre</font>
    dragSrcEl = this;

	e.dataTransfer.effectAllowed = 'move';
	e.dataTransfer.setData('text/html', this.innerHTML);
  }

  function handleDragEnd(e) {  <font color="white">//Arrastre Fin</font>

    items.forEach(function (item) {
      item.classList.remove('over');
    });
  }

  function handleDragOver(e) {  <font color="white">//Arrastrar sobre</font>
    e.preventDefault();
    return false;
  }

  function handleDragEnter(e) {   <font color="white">//Arrastrar Entrar</font>
    this.classList.add('over');
  }

  function handleDragLeave(e) {    <font color="white">//Arrastrar dejar</font>
    this.classList.remove('over');
  }
  
  function handleDrop(e) {          <font color="white">//Caída de inicio</font>   
   e.stopPropagation();
  if (dragSrcEl !== this) {
    dragSrcEl.innerHTML = this.innerHTML;
    this.innerHTML = e.dataTransfer.getData('text/html');
  }

  return false;
}

  <font color="white">//Aquí agregamos todos los eventos a cada elemento con el estilo'box'</font>
  let items = document.querySelectorAll('.box'); 
  
  items.forEach(function(item) {
    item.addEventListener('dragstart', handleDragStart);
    item.addEventListener('dragover', handleDragOver);
    item.addEventListener('dragenter', handleDragEnter);
    item.addEventListener('dragleave', handleDragLeave);
    item.addEventListener('dragend', handleDragEnd);
    item.addEventListener('drop', handleDrop);
  });
});
</script>