Drag-and-Drop — come funziona il trascinamento nelle applicazioni mobili

Cos’è il Drag-and-Drop?

Drag-and-Drop (DnD) è un metodo di manipolazione degli elementi dell’interfaccia grafica in cui l’utente afferra un oggetto con il dito o il mouse, lo sposta in un’altra posizione e lo rilascia. Nelle interfacce mobili, il Drag-and-Drop viene solitamente avviato con una pressione lunga — l’utente tiene premuto l’elemento per 300–500 ms, dopodiché il sistema passa l’interfaccia in modalità trascinamento e il movimento del dito sposta l’oggetto.

Storicamente, il Drag-and-Drop è nato nelle interfacce desktop (Xerox Star, 1981; Macintosh, 1984) come alternativa ai comandi copia/incolla. Sulle piattaforme mobili, il supporto completo è apparso in iOS 11 (2017) con UIDragInteraction e in Android 7.0 (2016) con il Multi-Window Drag-and-Drop. Prima di ciò, il trascinamento nelle app mobili era implementato con soluzioni personalizzate tramite riconoscitori di gesti.

Concetti chiave: sessione di trascinamento (drag session), elementi trascinabili (drag items), anteprima di trascinamento (drag preview — rappresentazione visiva dell’oggetto), zona di rilascio (drop target), proposta di rilascio (drop proposal — azione al rilascio: spostare, copiare, collegare). Il sistema gestisce la sessione a livello di sistema operativo, consentendo di trascinare oggetti tra diverse applicazioni (ad esempio, una foto dalla Galleria alle Note).

Fasi del Drag-and-Drop

Drag-and-Drop è suddiviso in tre fasi sequenziali. Fase 1 — Afferrare (Inizio trascinamento): l’utente avvia il gesto (di solito una pressione lunga), il sistema crea una sessione di trascinamento, cattura i dati dell’oggetto e mostra un’anteprima di trascinamento — una copia semitrasparente dell’elemento che segue il dito. In questa fase, il sistema rifiuta altri gesti (scorrimento, selezione del testo) fino al completamento del DnD.

Fase 2 — Spostare (Movimento di trascinamento): il dito si muove sullo schermo, l’anteprima di trascinamento segue il punto di contatto. Il sistema determina continuamente la zona di rilascio sotto il dito e invia eventi drag-enter, drag-move e drag-exit. La zona di rilascio può reagire visivamente: illuminarsi, espandersi o mostrare una linea di inserimento. Questa fase dura da 0,5 a 10+ secondi a seconda della complessità del compito.

Fase 3 — Rilasciare (Rilascio): il dito si solleva dallo schermo. Il sistema termina la sessione di trascinamento e chiama il callback di rilascio sull’elemento di destinazione. Se la zona di rilascio rifiuta il rilascio (ad esempio, trascinando un file in una cartella senza permessi di scrittura), l’anteprima di trascinamento torna animatamente alla posizione originale (animazione di annullamento). Se il rilascio viene accettato, l’elemento scompare dalla posizione originale e appare nella destinazione.

Trascinamento tra app è una funzionalità disponibile su entrambe le piattaforme. iOS supporta il Drag-and-Drop tra app in modalità Split View e Slide Over (iPad). Android supporta il trascinamento tra app in modalità Split Screen. I dati vengono trasferiti tramite UIPasteConfiguration (iOS) o ClipData (Android). Lo sviluppatore specifica i tipi di dati supportati (UTI per iOS, MIME per Android).

Drag-and-Drop su iOS: UIDragInteraction

UIDragInteraction è la principale API iOS per il trascinamento, aggiunta in iOS 11. Per abilitare il trascinamento da una View, aggiungi UIDragInteraction con UIDragInteractionDelegate. Il delegato definisce quali elementi sono trascinabili, il loro aspetto e comportamento. Per ricevere elementi, usa UIDropInteraction con UIDropInteractionDelegate, che determina se la View può accettare un rilascio e come elaborare i dati.

// UIDragInteraction — trascinare un elemento da una collezione
class DragViewController: UIViewController, UIDragInteractionDelegate {

    @IBOutlet var dragSourceView: UIView!

    override func viewDidLoad() {
        super.viewDidLoad()
        let dragInteraction = UIDragInteraction(delegate: self)
        dragSourceView.addInteraction(dragInteraction)
    }

    func dragInteraction(_ interaction: UIDragInteraction,
                          itemsForBeginning session: UIDragSession) -> [UIDragItem] {

        guard let data = Data(contentsOf: selectedFileURL) else { return [] }

        let itemProvider = NSItemProvider(object: data as NSData)
        let dragItem = UIDragItem(itemProvider: itemProvider)

        // Anteprima di trascinamento — una copia ridotta dell’elemento
        dragItem.previewProvider = {
            let previewView = UIImageView(image: thumbnailImage)
            previewView.alpha = 0.8
            return UIDragPreview(view: previewView)
        }
        return [dragItem]
    }
}

UIDropInteractionDelegate è l’interfaccia speculare per ricevere i rilasci. Il metodo canHandle(_:) verifica se il tipo di dato è supportato. sessionDidUpdate(_:) aggiorna visivamente lo stato (illuminazione, linea di inserimento). performDrop(_:) esegue l’elaborazione finale dei dati. iOS chiama automaticamente UIDropProposal con il tipo di operazione: .move, .copy o .forbidden. Il tipo di operazione influisce sulla visualizzazione (un’icona + nell’angolo dell’anteprima per la copia, un segno di divieto per forbidden).

Drag-and-Drop su Android: startDragAndDrop

View.startDragAndDrop() è il metodo Android SDK per avviare un trascinamento, disponibile dall’API 24 (Android 7.0). Viene chiamato dopo aver afferrato l’elemento (di solito in onLongClick). Parametri: ClipData (dati), DragShadowBuilder (ombra visiva), Object myLocalState (stato locale), flags. DragShadowBuilder crea un Bitmap che segue il dito. Il sistema gestisce automaticamente le animazioni e gli eventi tattili durante il trascinamento.

// Drag-and-Drop di un elemento RecyclerView con riordinamento
class ReorderAdapter(private val items: MutableList<String>) :
    RecyclerView.Adapter<ReorderAdapter.ViewHolder>() {

    override fun onBindViewHolder(holder: ViewHolder, position: Int) {
        holder.itemView.setOnLongClickListener {
            // Creazione di ClipData per il trasferimento dati
            val clipData = ClipData.newPlainText("item", items[position])

            // DragShadowBuilder personalizzato con anteprima ridotta
            val shadowBuilder = object : View.DragShadowBuilder(holder.itemView) {
                override fun onProvideShadowMetrics(shadowSize: Point, shadowTouchPoint: Point) {
                    shadowSize.set(itemView.width, itemView.height / 2)
                }
            }

            holder.itemView.startDragAndDrop(clipData, shadowBuilder, position, 0)
            true
        }
    }
}

Ricevere un rilascio su Android è implementato tramite View.setOnDragListener(). Il listener riceve gli eventi ACTION_DRAG_STARTED, ACTION_DRAG_ENTERED, ACTION_DRAG_LOCATION, ACTION_DRAG_EXITED, ACTION_DROP e ACTION_DRAG_ENDED. Nell’evento ACTION_DROP, i dati vengono estratti da ClipData e viene eseguita l’azione di destinazione. Per RecyclerView con riordinamento, si consiglia ItemTouchHelper.SimpleCallback — un meccanismo integrato che gestisce automaticamente la pressione lunga per afferrare, l’animazione di movimento e i metodi di utilità onMove/onSwiped.

Casi d’uso del Drag-and-Drop

Riordinamento di elenchi (drag to reorder) è lo scenario DnD più comune: gli utenti trascinano gli elementi dell’elenco per cambiarne l’ordine. Esempi: riordinare i contatti nei preferiti, ordinare le attività nei tracker (Trello, Todoist), riordinare le tracce in una playlist (Spotify, Apple Music). Implementato tramite ItemTouchHelper su Android o UILongPressGestureRecognizer con riordinamento delle celle su iOS.

Gestori di file — Drag-and-Drop per copiare e spostare file tra cartelle. iOS Files App, Android Files by Google, Dropbox — tutti supportano DnD. Trascinare un file su una cartella lo sposta all’interno (move), trascinare con Option/Ctrl premuto lo copia (copy). La zona di rilascio si illumina visivamente al passaggio del mouse, mostrando i confini della cartella.

Bacheche Kanban — Trello, Jira, Notion usano il Drag-and-Drop per spostare le carte tra le colonne (To Do → In Progress → Done). Durante il trascinamento, la carta si stacca dalla colonna di origine, segue il dito e quando supera il confine di un’altra colonna si inserisce con un’animazione. iOS 11+ supporta UIDragPreview con effetto parallasse, dove l’anteprima si inclina leggermente rispetto al punto di contatto, creando profondità.

Sezioni Springboard (iOS) — trascinamento delle icone delle app sulla schermata Home di iOS. Una pressione lunga su un’icona attiva la modalità “oscillazione” (le icone tremano), dopodiché l’utente può spostare le icone tra le pagine e creare cartelle. Questo è uno dei modelli UX DnD più complessi poiché richiede la gestione simultanea del trascinamento, dell’animazione di oscillazione e del raggruppamento in cartelle.

Raccomandazioni UX per il Drag-and-Drop

Feedback visivo è di fondamentale importanza per il Drag-and-Drop. L’oggetto trascinato deve cambiare: rimpicciolirsi (iOS: scala 0,8–0,9), diventare semitrasparente (alpha 0,7–0,8) e sollevarsi sopra l’interfaccia con un’ombra (shadow offset). La zona di rilascio deve reagire visivamente al passaggio del mouse: illuminarsi, espandersi o mostrare un bordo. Senza questi segnali, l’utente non può capire dove può rilasciare l’oggetto.

Animazione di ritorno (annullamento trascinamento) — se l’utente rilascia l’elemento al di fuori della zona di rilascio o su una zona non valida, l’oggetto deve tornare animatamente alla sua posizione originale. iOS UIDragInteractionDelegate fornisce dragInteraction(_:sessionDidMove:) per il monitoraggio e dragInteraction(_:session:willEndWith:) per l’animazione di ritorno. Android View.setOnDragListener riceve ACTION_DRAG_ENDED, dove è possibile avviare un’animazione di ritorno tramite ValueAnimator o ObjectAnimator.

Accessibilità: gli utenti con limitazioni motorie potrebbero non essere in grado di eseguire il gesto di trascinamento. Fornisci alternative tramite pulsanti “Sposta su/giù” per gli elenchi e un menu contestuale “Sposta nella cartella” per i file. iOS VoiceOver supporta l’azione del rotore “Trascina” per spostare gli elementi. Android TalkBack fornisce azioni personalizzate tramite AccessibilityNodeInfo.addAction(). Nike Run Club e Apple Health usano DnD per riordinare le metriche sul dashboard — con accesso tramite pulsanti standard.