Open Menu dzosoft
Close Menu dzosoft

   TODO SOBRE INFORMÁTICA Y TECNOLOGÍA


                             





Nord VPN

Publish perfectly-optimized content in 1-click



 
 
 

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...     

    TRAIN INTENSELY LIKE NEVER BEFORE AND PUSH YOUR LIMITS!