TruquiTrucos Dev – Drag & Drop nativo con HTML5

Publicada en WordPress.

Mira nuestro vídeo

Existe una versión mejor de tu web

Comparte este artículo

Me encanta poder hacer las cosas de forma nativa, sin tener que depender de librerías pesadas. ¿Que por qué? Fácil: porque todo lo que puedas hacer de forma nativa será más rápido y fluido. Por ejemplo, hace unos días nuestros amigos de Silo Creativo compartían una entrada sobre cómo implementar una barra de progreso de lo que llevas leído de un artículo en CSS puro. Brillante, ¿no crees? O yo mismo te explicaba hace unas semanas cómo usar JavaScript «a pelo» para que no tuvieras que depender de jQuery. A medida que los estándares HTML, CSS y JavaScript van avanzando, la necesidad de utilizar frameworks y otras herramientas se desvanece. Ya es hora de que aprendamos a usar lo nativo.

En la entrada de hoy me gustaría hablarte del Drag&Drop nativo en HTML5 (lo que viene siendo el famoso «arrastrar y soltar»). Sé que, en general, no es una funcionalidad que veamos muy, muy a menudo en las webs… pero todo depende del tipo de interfaz de usuario que tengas que hacer. Por ejemplo, nuestro plugin Nelio Content tiene un calendario editorial en el que se pueden ver todas las entradas que tienes programadas en el blog:

Calendario editorial de Nelio Content con entradas sin fecha
Calendario editorial de Nelio Content en el que podemos ver las entradas que tenemos programadas.

Evidentemente, cambiar la fecha de publicación de una entrada debería ser tan sencillo como arrastrar esa entrada y soltarla en el día en que queremos que se publique… y así es como funciona nuestro calendario, claro. Ahora bien, la pregunta es: ¿cómo podemos arrastrar un elemento de nuestra web? ¿Cómo definimos en qué zonas se puede soltar y en cuáles no? Pues bien, eso es lo que trataré de explicarte hoy.

Drag & Drop usando jQuery UI

Antes de ver la solución en HTML5 y JavaScript puros, he pensado que merece la pena dedicar un par de minutos a ver la solución usando la librería jQuery UI, ya que es la que estamos usando actualmente en Nelio Content y es bastante sencilla de usar. Con jQuery UI, básicamente necesitas usar dos funcionalidades: draggable y droppable.

Con la primera de ellas, draggable, conseguimos que el elemento que queramos sea «arrastrable». Con la segunda, droppable, podemos especificar qué elementos de nuestra interfaz pueden recibir elementos arrastrables. Todo esto lo puedes ver en el siguiente ejemplo:

See the Pen Drag&Drop using jQuery UI by David (@davilera) on CodePen.0

Fíjate cuán sencillo resulta todo. Por un lado, empezamos definiendo que el elemento con la clase item puede ser arrastrado con el ratón, simplemente invocando a la función draggable del elemento referenciado vía jQuery. En nuestro ejemplo, además, especificamos un atributo llamado helper con el valor clone; con esto básicamente le estamos pidiendo a jQuery que cree una copia del elemento original y que sea la copia la que moveremos por la pantalla. Así, una vez dejemos de arrastrar el elemento, el helper sencillamente desaparecerá.

Por otro lado, especificamos que todos los elementos con la clase day pueden ser los receptores de un elemento que estemos arrastrando, llamando esta vez a la función droppable. En este caso, especificamos algunos parámetros más: primero le decimos que sólo puede aceptar elementos de la clase item, luego le indicamos la clase que queremos que tenga cuando estamos con el ratón encima (para que podamos cambiar su apariencia mediante CSS y, así, quede claro que podemos soltar el elemento encima) y, finalmente, definimos qué tiene que suceder cuando soltamos (drop) el elemento (en nuestro caso, se quita del día original y se añade al nuevo día).

Drag & Drop nativo con HTML 5

La implementación del Drag&Drop nativo usando HTML 5 y vanilla JavaScript no es mucho más difícil que con jQuery UI (aunque hay que reconocer que es un poco más engorroso). Básicamente, deberemos seguir los mismos pasos que hemos hecho antes:

  1. Indicar que un elemento se puede arrastrar. Esto lo conseguimos llamando especificando el atributo draggable="true" en el propio HTML o con la función JavaScript item.setAttribute('draggable',true).
  2. Especificar la función que queremos ejecutar al soltar (drop). Esto lo conseguimos especificando la función ondrop del elemento que nos interesa.

¡Y listo! Con esto ya tenemos lo mismo que hasta ahora:

See the Pen Native Drag&Drop with HTML5 by David (@davilera) on CodePen.0

«Espera un segundo, David. En el código que acabas de compartir hay bastante más código del que me has explicado, ¿no?». Bueno, sí, tienes razón; implementar el D&D nativo es un poco más complicado, ya que lo que en jQuery UI se especificaba con un sencillo flag (como, por ejemplo, el helper:clone o la clase del droppable mientras pasamos el ratón por encima), aquí necesitamos especificarlo a mano.

  • El elemento que arrastramos. Cuando empezamos a arrastrar un elemento con HTML 5 nativo, necesitamos hacer dos cosas: montar el «helper» y apuntarnos en algún lado el elemento que movemos. Esto es precisamente lo que hacemos en la función ondragstart: montamos el «helper» en las líneas 9 y 10 y nos apuntamos el elemento que estamos moviendo en una variable local (línea 11).
  • Iluminar las áreas droppable. Para iluminar las áreas donde podemos soltar el elemento necesitamos usar los diferentes eventos nativos que nos da HTML 5, los cuales son el hecho de que el ratón se pone encima del elemento (ondragenter), el ratón se mueve por encima del elemento (ondragover) o el ratón se va (ondragleave).

¡Y ya está! El Drag & Drop nativo requiere un poco más de código fuente, pero es mucho más fluido y rápido. En el ejemplo que hemos visto en esta entrada, donde sólo hay un elemento a arrastrar y dos zonas para soltarlo no es un problema, pero cuando gestionas muchos más elementos (como el calendario de Nelio Content), créeme que la diferencia se nota.

Imagen destacada de Tetsuya Tomomatsu vía Unsplash.

4 comentarios en «TruquiTrucos Dev – Drag & Drop nativo con HTML5»

  1. Buenísimo David!

    Viene genial para montar algo ligero, pues aunque aparentemente es más código que con jQuery UI, no estás cargando dos librearías externas, con lo cual comparativamente es muy liviano.

    Muy bueno, felicidades 🙂

    1. Gracias, Ricardo. Como ves, sigo tu ejemplo y también busco fórmulas para solucionar problemas de forma nativa 😉

Deja una respuesta

No publicaremos tu correo electrónico. Los campos obligatorios están marcados con: •

He leído y acepto la Política de privacidad de Nelio Software

Al marcar la casilla de aceptación estás dando tu legítimo consentimiento para que tu información personal se almacene en SiteGround y sea usada por Nelio Software con el propósito único de publicar aquí este comentario. Contáctanos para corregir, limitar, eliminar o acceder a tu información.