DragDropArrastrar y soltar (drag and drop) es una expresión informática que se refiere a la acción de mover con el ratón objetos de una ventana a otra o entre partes de una misma ventana. Los objetos arrastrados son habitualmente archivos, pero también pueden ser arrastrados otros tipos de elementos en función del programa.

Un ejemplo es arrastrar y soltar entre ventanas de un gestor de archivos para cambiarlos de carpeta, o archivos de audio en un reproductor para moverlos de su lista de reproducción.

Los objetos que pueden ser arrastrados depende del programa o ventana que los aloja. Igualmente, el efecto de soltar objetos sobre una ventana o programa depende del receptor de los objetos. Habitualmente cuando se están arrastrando objetos sobre ventanas el icono del ratón cambia para indicar que acción se producirá si se sueltan, o se mostrara un símbolo similar a prohibido indicando que la acción de soltar los objetos no producirá ningún resultado. Empecemos con los videos:


39. API Drag Drop I – Mover elementos

Comenzamos en este vídeo a ver la API Drag & Drop. nueva en la especificación HTML5 nos permite crear páginas web donde el usuario podrá mover elementos. Vemos los eventos del objeto a arrastrar dragstart, drag y dragend.

40. API Drag Drop II – Arrastrar y soltar

Terminamos de construir el ejemplo del vídeo anterior donde arrastramos un objeto desde una posición inicial a una posición final.
Utilizamos para ello el método preventDefault() para resetear el comportamiento por defecto que pudieran tener los diferentes navegadores a la hora de arrastrar y soltar elementos. Utilizamos diferentes eventos de la API Drag & Drop como dragenter, dragover o drop.

41. API Drag Drop III – Movimientos ratón

Ponemos a trabajar en nuestro ejemplo a los eventos dragenter y dragleave para establecer el comportamiento de la zona de destino cuando el ratón entra y sale de la misma.

42. API Drag Drop IV – Galería de imágenes

Continuamos elaborando el ejemplo del vídeo anterior. Completamos el comportamiento de las cuatro imágenes y de la zona destino.

43. API Drag Drop V – Galería de imágenes II 

Terminamos la práctica. Completamos el comportamiento de las 4 imágenes. Impedimos que la 2ª imagen se pueda arrastrar y cambiamos el comportamiento de la zona de destino en función de la imagen arrastrada.

44. API Drag Drop VI – Arrastrando archivos

Terminamos en este vídeo con la API Drag & Drop viendo cómo arrastrar archivos de nuestro sistema de archivos al navegador. Utilizando la propiedad files del objeto dataTransfer obtenemos información de los archivos del sistema.