Durante mucho tiempo, han existido funciones de JavaScript que nos permiten crear interfaces de arrastrar y soltar, pero ninguna de estas implementaciones era nativa del navegador.
En HTML5, tenemos un método nativo para crear interfaces de arrastrar y soltar (con un poco de ayuda de JavaScript).
Voy a contarte cómo lograr esto ...
Me gustaría quitar esto del camino antes de progresar: actualmente, la función de arrastrar y soltar HTML5 es compatible con todos los principales navegadores de escritorio (incluido IE (incluso IE 5.5 tiene soporte parcial)) pero actualmente no es compatible con ninguno de los dispositivos móviles populares. navegadores.
En cada etapa de la operación de arrastrar y soltar, se dispara un evento diferente para que el navegador sepa qué código JavaScript ejecutar; los eventos son:
Con todos estos oyentes de eventos tiene mucho control sobre cómo funciona su interfaz y cómo se comporta en diferentes circunstancias.
Aquí es donde sucede toda la magia de arrastrar y soltar; este objeto contiene los datos enviados por la operación de arrastre. Los datos se pueden establecer y recuperar de varias maneras, las más importantes son:
Ahora comenzaremos a crear nuestra simple ejemplo de arrastrar y soltar, puedes ver que tenemos dos divisiones pequeñas y una más grande, podemos arrastrar y soltar las pequeñas dentro de la grande e incluso podemos moverlas hacia atrás.
Lo primero que debemos hacer es crear nuestro HTML. Hacemos que los divs se puedan arrastrar con el atributo arrastrable, así:
draggable="true">Cuando se hace esto, necesitamos definir la función javascript que se ejecutará cuando comencemos a arrastrar este elemento:
function dragStart(ev) {ev.dataTransfer.effectAllowed='move';ev.dataTransfer.setData("Text", ev.target.getAttribute('id')); ev.dataTransfer.setDragImage(ev.target,100,100);return true;}En este código primero declaramos qué tipo de efecto permitimos en la operación y lo configuramos para moverlo, en la segunda línea establecemos los datos para la operación y en este caso el tipo es Texto y el valor es la ID del elemento estamos arrastrando Después de esto, usamos el método setDragImage para establecer lo que vamos a arrastrar y luego, dónde estará el cursor mientras lo arrastramos, y dado que los cubos son 200 por 200px lo coloqué en el centro mismo. Finalmente volvemos cierto.
Para que un elemento acepte una caída, necesita escuchar 3 eventos diferentes: dragEnter, dragOver y también el evento drop , así que vamos a agregar esto a nuestro html en el div con la ID de big:
Ahora que hemos agregado detectores de eventos, necesitamos crear estas funciones, comenzaremos por los eventos dragenter y dragover:
function dragEnter(ev) {ev.preventDefault();return true;}function dragOver(ev) {ev.preventDefault();}En la primera función definimos lo que queremos que suceda cuando el elemento que arrastramos alcance el elemento en el que se supone que debe soltarse, en este caso solo evitamos el comportamiento predeterminado del navegador, pero puede hacer cualquier cantidad de cosas como cambiar el fondo o agregue texto para indicar que el usuario está arrastrando hacia el área correcta y utilizando el evento dragleave puede revertir los cambios que realizó. A continuación, en la función de dragOver , simplemente evitamos que el valor predeterminado permita la caída.
La siguiente parte es donde definimos la función para cuando dejamos caer el elemento en el objetivo deseado:
function dragDrop(ev) {var data = ev.dataTransfer.getData("Text");ev.target.appendChild(document.getElementById(data));ev.stopPropagation();return false;}En esta última parte, primero establecemos una variable llamada datos en la cual obtenemos todos los datos que están disponibles para el formato de texto y luego agregamos esa información (que será el elemento que estamos arrastrando) al div donde deseamos soltar el elemento. Por último, algunos toques finales como detener la propagación y también devolver falso.
Comprobación la demo , puedes ver que también nos aseguramos de que los dos div se puedan arrastrar a su ubicación original. Afortunadamente, agregar otro destino de caída puede ser más simple de lo que piensas; porque las funciones ya están en su lugar, todo lo que tenemos que hacer es agregar los oyentes del evento, así:
Y eso es todo lo que necesitamos para permitir el arrastre de los divs al lugar original.
Hay muchas aplicaciones de arrastrar y soltar creadas utilizando bibliotecas de JavaScript, y a menudo es más simple usar esas bibliotecas. Pero espero que, en esta técnica HTML5 y JavaScript, veas el potencial futuro de la solución nativa.
¿Has construido una interfaz de arrastrar y soltar? ¿Cómo se compara el HTML5 nativo con las soluciones de JavaScript puro? Háganos saber en los comentarios.
Imagen / miniatura destacada, caída de imagen a través de photophilde.