Open Menu dzosoft
Close Menu dzosoft

   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>

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>
    


     

    Puedes probar este ejemplo en la siguiente ventana moviendo las imágenes de un div a otro:

     

    También te puede interesar


    Cómo hacer llamadas Ajax con XMLHTTPRequest

    Cómo copiar texto al portapapeles usando html, css y javascript

    Cómo crear una presentación de diapositivas receptiva con CSS y JavaScript

    Cómo capturar una foto desde una cámara usando Javascript

    Cómo dibujar en el navegador con JavaScript


    Leave comment
              

    Guardar apodo y correo electrónico en este navegador para la próxima vez.



    Cargando...