# Come creare attività di drag and drop

> Con il drag and drop puoi creare attività per  associare classificare o abbinare elementi  trascinandoli nellarea di destinazione corretta  Immagina i tuoi s

Source: https://help.genially.com/it/come-creare-attivita-di-drag-and-drop-SJIMkHnmbx

Last updated: 2026-04-20T11:53:32.132Z

Con il drag and drop puoi creare attività per **associare, classificare o abbinare elementi** trascinandoli nell’area di destinazione corretta.

Immagina i tuoi studenti che posizionano ogni parola nella categoria giusta o i tuoi clienti che inseriscono la chiave nella serratura corretta per sbloccare una sfida. Questa attività offre tantissime possibilità creative!

Segui questo tutorial se vuoi creare una dinamica efficace che attivi allo stesso tempo l’apprendimento visivo, motorio e cognitivo.

  

## **Caratteristiche principali**

1.  **Gli elementi trascinabili** sono i veri protagonisti dell’attività. **Possono essere** testi, immagini e GIF, forme e sagome, icone, illustrazioni, personaggi, pulsanti e sticker. Tieni presente che, anche se un elemento è bloccato nell’editor, puoi comunque selezionarlo come elemento trascinabile. Oltre a trascinarli, puoi spostare gli elementi usando la navigazione da tastiera oppure facendo clic su di essi e poi sulla zona di destinazione.
2.  **Le aree di destinazione** sono le zone in cui devono essere rilasciati gli elementi trascinabili. **Possono essere** immagini e GIF, forme e sagome, icone, illustrazioni, personaggi, ma anche aree invisibili, testi, pulsanti e sticker. La dimensione dell’area dipenderà dall’elemento che scegli come destinazione.

  

Ogni elemento trascinabile **può avere una o più aree di destinazione**, e una stessa area può ricevere **più elementi trascinabili diversi**.

*   Se un elemento viene rilasciato sulla **zona corretta**, la connessione viene stabilita e si attiva un piccolo effetto di animazione che rafforza la sensazione di successo.
    
*   Se un elemento viene rilasciato sulla **zona sbagliata**, compare un piccolo effetto e l’elemento torna alla sua posizione iniziale.
    

Puoi configurare cosa succede **a ogni connessione corretta, in caso di errore o al completamento dell’attività**: aprire una finestra, riprodurre un audio, passare a un’altra pagina, aprire un link, attivare un effetto, mostrare e/o nascondere elementi o scorrere fino a un elemento (solo nelle creazioni in formato mobile). [Combina queste azioni](https://help.genially.com/en_us/how-to-combine-several-interactions-in-genially-H1uc9Dr2j) come preferisci.

  

## **Come creare un’attività di drag and drop**

Segui questi passaggi:

1.  **Progetta la tua attività**
    

Crea la scena o la composizione visiva dell’attività, posizionando ogni elemento trascinabile nel suo punto di partenza. Includi anche le aree di destinazione.

2.  **Usa l’interattività Drag and drop**

Fai clic sull’elemento che vuoi rendere trascinabile, premi il pulsante _Interattività_ e seleziona _Drag and drop_. Fatto! Il tuo primo elemento trascinabile è pronto.

3.  **Imposta le connessioni una alla volta**
    

Ora fai semplicemente clic sul secondo quadrato e seleziona la sua area di destinazione per completare la prima connessione.

Ripeti questo processo per tutti gli elementi trascinabili presenti (un elemento trascinabile → un’area di destinazione). Non c’è alcun limite.

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

  

4\. **Personalizza le azioni**

Decidi cosa deve succedere in ogni caso:

1.  **A ogni connessione corretta.** Ad esempio, puoi riprodurre un audio di successo ogni volta che una connessione è corretta e/o mostrare una finestra. È utile se vuoi fornire un feedback personalizzato per ogni elemento trascinabile.
    
2.  **In caso di errore.** Ad esempio, puoi mostrare una finestra con un messaggio generico o riprodurre un audio di errore ogni volta che la connessione è sbagliata.
    
3.  **Al completamento dell’attività.** Ad esempio, puoi festeggiare con un effetto coriandoli e sbloccare la schermata successiva.
    

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

  

5\. **Scegli quando validare**

Preferisci verificare tutte le connessioni insieme o man mano che trascini gli elementi? Puoi attivare il **pulsante di validazione** per confermare che gli elementi siano stati posizionati correttamente solo quando sono stati tutti collocati. Scegli il colore del pulsante in base alle tue preferenze.

Un consiglio: se preferisci validare le connessioni una alla volta senza usare il pulsante, puoi creare elementi trascinabili non associati a nessuna zona di destinazione. Quando li trascini, riceverai un feedback di errore.

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

  

Tutto pronto? Visualizza l’anteprima per vedere come funziona la tua attività di drag and drop.

  

### Accessibilità

Il drag and drop è compatibile con gli screen reader e la navigazione da tastiera. Questo significa che chiunque, indipendentemente dalle proprie capacità, può completare queste attività in Genially.

  

## **Idee e consigli per sfruttarla al massimo**

Leggendo questo tutorial, ti saranno sicuramente venute in mente diverse idee. Nel dubbio, ecco alcuni esempi di ispirazione.

<span class="fr-mk" style="display: none;">&nbsp;</span>

  

Vuoi iniziare da qualcosa di semplice? Allora segui questi consigli:

1.  **Livello facile:** usa pochi elementi trascinabili nella tua attività di drag and drop. Puoi anche utilizzare colori o ombre leggere per suggerire dove si trovano le aree di destinazione.
    
2.  **Livello ultra facile:** indica quali elementi sono trascinabili. Attiva questi suggerimenti visivi dal menu principale **☰** (in alto a sinistra), fai clic su _Preferenze_ e poi attiva _Indicare se un elemento può essere trascinato_.
