≡En resumen
- Drag and drop significa «arrastrar y soltar»: coges un elemento, lo mueves y lo sueltas en otro lugar.
- Se escribe «drag and drop» o «drag & drop»; «drag a drop», «drag en drop» o «drop and click» son errores habituales.
- Es la base de los constructores web sin código, los editores de email, los tableros Kanban y la subida de archivos.
- En la web se programa con la API HTML Drag and Drop o con librerías de JavaScript que también funcionan en pantallas táctiles.
- Por accesibilidad, toda acción de arrastrar debe poder hacerse también con un clic o un toque.
01 ¿Qué es drag and drop y qué significa?
La expresión viene del inglés drag (arrastrar) y drop (soltar). En español la traducción asentada es arrastrar y soltar, que es el término que usan Windows, macOS o Android en sus menús. Es una de las piezas clave de la interfaz gráfica de usuario, porque imita un gesto físico: coger algo con la mano y dejarlo en otro sitio.
El gesto se popularizó con el Macintosh original de Apple en 1984, donde se llamaba click and drag y servía para copiar archivos entre carpetas y discos. Más tarde System 7.5 lo amplió con «Macintosh Drag and Drop», que permitía arrastrar texto e imágenes entre aplicaciones.
02 Drag and drop, drag & drop, drag n drop: cómo se escribe
Muchas búsquedas llegan con variantes que no existen en inglés. Esta tabla aclara qué forma es correcta y qué quería decir quien la escribió.
| Forma | ¿Es correcta? | Comentario |
|---|---|---|
| Drag and drop | Sí | Forma estándar en inglés |
| Drag & drop | Sí | Misma expresión con el signo &; habitual en nombres de producto |
| Drag'n'drop / drag n drop | Informal | Abreviatura coloquial; en código se ve como DnD |
| Drag a drop / drag en drop | No | Errores de oído o de autocorrector; se refieren a drag and drop |
| Drop and click | No | Mezcla de drag and drop y point and click (señalar y hacer clic) |
| Arrastrar y soltar | Sí | Traducción recomendable en textos en español |
03 ¿Para qué sirve el drag and drop? Ejemplos reales
El arrastrar y soltar convierte tareas que antes exigían menús o código en un gesto de un segundo. Estos son los usos que te encuentras a diario:
Gestión de archivos
Mover documentos entre carpetas, llevarlos a la papelera o subirlos a la nube soltándolos en la ventana del navegador.
Creadores de páginas web
Constructores como Wix, Jimdo, Google Sites o Elementor colocan textos, imágenes y botones arrastrando bloques.
Editores de email
Las herramientas de newsletter montan plantillas arrastrando módulos de texto, imagen o botón.
Diseño gráfico
Canva y Figma permiten componer piezas moviendo elementos sobre el lienzo.
Gestión de tareas
En tableros Kanban como Trello mueves tarjetas de «Pendiente» a «Hecho» arrastrándolas.
Automatización sin código
Plataformas como n8n o Make conectan pasos de un flujo arrastrando nodos y uniéndolos.
Abres una plantilla en Wix, arrastras un bloque de formulario debajo del titular, sueltas una imagen desde tu escritorio en la cabecera y reordenas las secciones moviéndolas arriba o abajo. Sin escribir una línea de HTML tienes una página publicable en una tarde.
04 Cómo hacer drag and drop en Windows, Mac y móvil
El gesto básico es el mismo en todos los sistemas: pulsas sobre el elemento, lo desplazas sin soltar y levantas el dedo o el botón en el destino. Lo que cambia es qué hace el sistema al soltar y cómo puedes forzar otra acción con una tecla.
| Sistema | Comportamiento por defecto | Cómo cambiarlo |
|---|---|---|
| Windows | Mueve si el destino está en la misma unidad y copia si está en otra | Ctrl para copiar, Mayús para mover, Alt para crear acceso directo; con el botón derecho eliges en un menú |
| macOS | Mueve en el mismo disco y copia a otro disco | Opción para copiar, Opción + Comando para crear un alias |
| Android e iOS | Mantén pulsado hasta que el elemento se levante y arrastra | En iPad puedes arrastrar entre dos apps abiertas en pantalla dividida |
05 Editores drag and drop para crear webs: ventajas y límites
Los editores visuales han democratizado la creación de webs. En WordPress, el editor de bloques Gutenberg, que llegó con la versión 5.0 en 2018, ya permite mover bloques, y los maquetadores como Elementor o Divi llevan el arrastrar y soltar a todo el diseño. Casi cualquier gestor de contenidos (CMS) actual ofrece ya algún tipo de edición visual.
| Aspecto | Editor drag and drop | Desarrollo a medida |
|---|---|---|
| Tiempo de puesta en marcha | Horas o días | Semanas |
| Conocimientos necesarios | Ninguno técnico | Programación y diseño |
| Rendimiento | Código más pesado y genérico | Código ligero y optimizado |
| Flexibilidad | Limitada a los bloques disponibles | Total |
| Dependencia | Del proveedor o del plugin | Del equipo que mantiene el código |
Cuando el proyecto necesita una imagen propia, rendimiento y escalabilidad, compensa un diseño web a medida que deje al cliente un editor sencillo para el contenido sin cargar la web de código innecesario.
06 Cómo funciona el drag and drop en HTML y JavaScript
En el navegador, el arrastrar y soltar se programa con la API HTML Drag and Drop, que forma parte del estándar HTML. Un elemento se vuelve arrastrable con el atributo draggable="true" y el comportamiento se controla con JavaScript escuchando una serie de eventos.
-
1
dragstart
Se dispara en el elemento de origen al empezar a arrastrar. Aquí guardas los datos que viajan con él.
-
2
drag, dragenter y dragover
Se lanzan mientras arrastras y al pasar por encima de una zona de destino; en dragover indicas si se puede soltar.
-
3
dragleave
Avisa de que el puntero ha salido de la zona, para quitar el resaltado visual.
-
4
drop
Se dispara en el destino al soltar. Es el momento de leer los datos e insertar el elemento o subir el archivo.
-
5
dragend
Cierra la operación en el origen, tanto si se completó como si se canceló.
La API nativa está pensada para ratón y su soporte táctil es irregular, por eso muchas aplicaciones usan librerías como SortableJS o dnd-kit, que unifican ratón, dedo y teclado. Es lo habitual en el desarrollo de aplicaciones web a medida con paneles, tableros o listas ordenables.
07 Drag and drop, usabilidad y accesibilidad
Arrastrar es cómodo para muchas personas, pero no para todas: quien navega con teclado, con lector de pantalla o con dificultades motoras puede no ser capaz de mantener pulsado y desplazar a la vez. Además, no siempre es evidente qué se puede arrastrar ni qué pasará al soltar.
- ✓Ofrece botones alternativos: «subir», «bajar» o «mover a…».
- ✓Marca visualmente los elementos arrastrables con un icono de agarre.
- ✓Resalta la zona de destino mientras se arrastra.
- ✓Permite seleccionar archivos con un botón además de soltarlos.
- ✓Anuncia los cambios de orden a los lectores de pantalla.
- ✓Prueba el gesto en móvil, con teclado y con lector de pantalla.
Cuidar estos detalles es parte de un buen diseño UX/UI: el gesto tiene que ser un atajo cómodo, nunca la única puerta de entrada.
Preguntas frecuentes sobre Drag & Drop
Significa «arrastrar y soltar». Es el gesto de seleccionar un elemento en pantalla, desplazarlo y soltarlo en otra zona para moverlo, copiarlo o ejecutar una acción.
Lo correcto es «drag and drop» o «drag & drop». «Drag a drop» y «drag en drop» son errores; en español puedes decir simplemente «arrastrar y soltar».
No es un término técnico. Suele ser una confusión entre drag and drop (arrastrar y soltar) y point and click (señalar y hacer clic).
Es una herramienta que permite crear páginas web, emails o diseños colocando bloques con el ratón, sin programar. Wix, Elementor, Canva o los editores de newsletter son ejemplos.
Mantén el dedo pulsado sobre el elemento hasta que se levante, desplázalo sin soltar y retira el dedo en el destino. Así se mueven iconos, tarjetas o archivos.
Con la API HTML Drag and Drop: el atributo draggable y los eventos dragstart, dragover y drop en JavaScript. Para móviles se suelen usar librerías como SortableJS o dnd-kit.
Solo si hay alternativa. WCAG 2.2 exige que cualquier acción de arrastre pueda hacerse también con un clic o toque, sin arrastrar.
Fuentes consultadas
Sobre el autor
Germán Gutiérrez
Development Manager en appyweb
Dirige el equipo de desarrollo de appyweb: aplicaciones web y móviles, SaaS, integraciones y arquitectura de software.
Ver perfil en LinkedIn ↗