# Cómo crear actividades de arrastrar y soltar

> Con arrastrar y soltar puedes crear actividades para  asociar clasificar o emparejar elementos  arrastrándolos hasta la zona de destino correcta  Imagina que

Source: https://help.genially.com/es/como-crear-actividades-de-arrastrar-y-soltar-SJIMkHnmbx

Last updated: 2026-04-20T11:52:54.631Z

  

Con arrastrar y soltar, puedes crear actividades para **asociar, clasificar o emparejar elementos** arrastrándolos hasta la zona de destino correcta.

Imagina que tu alumnado ubica cada palabra en la categoría correspondiente o que tus clientes consiguen situar la llave en la cerradura correcta para desbloquear un reto. ¡Esta actividad tiene miles de posibilidades creativas!

Sigue este tutorial si quieres crear una dinámica potente donde activar el aprendizaje visual, motor y cognitivo al mismo tiempo.

  

## **Características principales**

1.  **Los elementos arrastrables** son los protagonistas del juego. **Pueden ser** textos, imágenes y GIFs, formas y siluetas, iconos, ilustraciones, personajes, botones y stickers. Ten en cuenta que, aunque un elemento esté bloqueado en el editor, puedes seleccionarlo como arrastrable. Además de arrastrando, los elementos se pueden mover de posición mediante navegación por teclado al hacer clic sobre ellos y, posteriormente, haciendo clic en la zona de destino. 
2.  **Las zonas de destino** son las áreas donde se deben soltar los elementos arrastrables. **Pueden ser** imágenes y GIFs, forma y siluetas, iconos, ilustraciones, personajes, pero también áreas invisibles, textos, botones y stickers. El tamaño de la zona dependerá del elemento que elijas como destino.

  

Cada elemento arrastrable **puede tener una o varias zonas de destino**, y una misma zona puede recibir **varios arrastrables distintos**.

*   Si se suelta un elemento sobre **la zona correcta**, se establece la relación y se genera un pequeño efecto de animación que refuerza la sensación de logro.
    
*   Si se suelta un elemento sobre **la zona incorrecta**, se genera un pequeño efecto y el elemento vuelve a su posición inicial.
    

Puedes configurar lo que sucede **al acertar cada conexión, al fallar o al completar la actividad**: abrir una ventana, reproducir un audio, saltar a otra página, abrir un enlace, lanzar un efecto, mostrar y/o ocultar elementos o hacer scroll hacia un elemento (solo en creaciones con formato móvil). [Combina estas acciones](https://help.genially.com/es/como-combinar-varias-interacciones-en-genially-H1uc9Dr2j) a tu gusto. 

  

## **Cómo crear una actividad de arrastrar y soltar**

Sigue estos pasos:

1.  **
    
    **Diseña tu actividad**
    
    **

Crea la escena o composición visual de la actividad, ubicando cada elemento arrastrable en su punto de partida. Incluye también las zonas de destino. 

2.  **
    
    **Usa la interactividad Arrastrar y soltar**
    
    **

Pulsa el elemento que quieras convertir en arrastrable, haz clic en el botón de Interactividad y selecciona Arrastrar y soltar. Listo, ya tienes configurado el primer arrastrable. 

3.  **
    
    **Establece una a una las conexiones**
    
    **

Ahora solo tienes que pulsar el segundo cuadrado y seleccionar su zona de destino para finalizar la primera conexión.

Repite este proceso tantas veces como elementos arrastrables existan (un arrastrable → una zona de destino). No hay límite. 

![](https://cdn.prod2.kustomerhostedcontent.com/media/63302dcd394e719f98c84c4c/5adc7ebe6992e84c6103a65b05805a25.gif)

  

4\. **Personaliza las acciones**

Decide qué sucede en cada caso:

1.  **Al acertar cada conexión**. Por ejemplo, puedes reproducir un audio de acierto cada vez que se acierta una conexión y/o mostrar una ventana. Esto es útil si quieres dar feedback personalizado sobre cada arrastrable.
    
2.  **Al fallar**. Por ejemplo, puedes mostrar una ventana con un mensaje genérico, o reproducir un audio de error cada vez que se falle una conexión.
    
3.  **Al completar la actividad**. Por ejemplo, puedes celebrarlo con un efecto confeti y desbloquear la siguiente pantalla.
    

![](https://cdn.prod2.kustomerhostedcontent.com/media/63302dcd394e719f98c84c4c/3c007962373eab0d922fffb23f4d8814.gif)

  

5\. **Decide cuándo validar**

¿Prefieres resolver todas las conexiones a la vez o a medida que se vayan arrastrando? Puedes activar el **botón de validación** para confirmar si los elementos han sido arrastrados a la zona de destino correcta solo cuando todos hayan sido ubicados. Decide el color de este botón según tus preferencias.

Un truco: si prefieres validar una a una las conexiones, sin el botón, puedes crear elementos arrastrables que no estén asociados a ninguna zona de destino para que, al arrastrarlos, el feedback sea de error.

![](https://cdn.prod2.kustomerhostedcontent.com/media/63302dcd394e719f98c84c4c/527d00adbe51c5ce1088b17d17e0bccb.gif)

  

¿Ya lo tienes? Previsualiza para ver cómo funciona tu actividad de arrastrar y soltar.

  

### Sobre accesibilidad

Arrastrar y soltar es compatible con lectores de pantalla y navegación por teclado. Esto significa que cualquier persona, independientemente de sus capacidades, puede completar este tipo de actividades en Genially.

  

##  **Ideas y consejos para sacarle el máximo partido**

Seguro que al leer este tutorial, ya te han venido a la mente varias ideas pero, por si acaso, aquí tienes algunos ejemplos inspiradores.

  

¿Quieres empezar por algo sencillo? Entonces, sigue estos consejos: 

1.  **Nivel fácil:** usa pocos elementos arrastrables en tu actividad de arrastrar y soltar. También puedes usar colores o sombras sutiles para dar pistas sobre dónde se ubican las zonas de destino.
    
2.  **Nivel ultra fácil:** indica qué elementos son arrastrables. Activa estas pistas visuales desde el menú principal **☰** (esquina superior izquierda), pulsa en _Preferencias_ y después activa _Indicar si se puede arrastrar_.
