TruquiTrucos Dev – Drag & Drop nativo con HTML5

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:

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

Nelio Content

Estoy tan contento con Nelio Content que parece que me hayan pagado para hablar bién de él… pero es que también a ti te encantará: funciona como prometen, la programación automática de mensajes es increíble, la calidad/precio no tiene parangón y su equipo de soporte se siente como si fueran parte del tuyo.

Panozk

WordPress.org

Ver planes

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.