Drag-and-Drop — wie Drag and Drop in mobilen Anwendungen funktioniert

Was ist Drag-and-Drop?

Drag-and-Drop (DnD) ist eine Methode zur Manipulation grafischer Oberflächenelemente, bei der der Benutzer ein Objekt mit dem Finger oder der Maus greift, es an eine andere Position bewegt und loslässt. In mobilen Oberflächen wird Drag-and-Drop normalerweise durch einen langen Druck eingeleitet — der Benutzer hält das Element 300–500 ms gedrückt, woraufhin das System die Oberfläche in den Ziehmodus versetzt und die Fingerbewegung das Objekt verschiebt.

Historisch entstand Drag-and-Drop in Desktop-Oberflächen (Xerox Star, 1981; Macintosh, 1984) als Alternative zu Kopieren/Einfügen-Befehlen. Auf mobilen Plattformen erschien die volle Unterstützung in iOS 11 (2017) mit UIDragInteraction und in Android 7.0 (2016) mit Multi-Window-Drag-and-Drop. Davor wurde das Ziehen in mobilen Apps durch benutzerdefinierte Lösungen mit Gestenerkennern implementiert.

Schlüsselkonzepte: Drag-Session, Drag-Items, Drag-Vorschau (visuelle Darstellung des Objekts), Drop-Target (Ablagezone), Drop-Vorschlag (Aktion beim Ablegen: verschieben, kopieren, verknüpfen). Das System verwaltet die Sitzung auf Betriebssystemebene, sodass Objekte zwischen verschiedenen Anwendungen gezogen werden können (z. B. ein Foto aus der Galerie in Notizen).

Phasen des Drag-and-Drop

Drag-and-Drop wird in drei aufeinanderfolgende Phasen unterteilt. Phase 1 — Greifen (Ziehstart): Der Benutzer initiiert die Geste (normalerweise Long Press), das System erstellt eine Drag-Session, erfasst die Daten des Objekts und zeigt eine Drag-Vorschau an — eine halbtransparente Kopie des Elements, die dem Finger folgt. In dieser Phase lehnt das System andere Gesten (Scrollen, Textauswahl) ab, bis der DnD abgeschlossen ist.

Phase 2 — Bewegen (Ziehbewegung): Der Finger bewegt sich über den Bildschirm, die Drag-Vorschau folgt dem Berührungspunkt. Das System bestimmt kontinuierlich das Drop-Target unter dem Finger und sendet Drag-Enter-, Drag-Move- und Drag-Exit-Ereignisse. Das Drop-Target kann visuell reagieren: Hervorheben, Erweitern oder Anzeigen einer Einfügelinie. Diese Phase dauert je nach Aufgabenkomplexität 0,5 bis 10+ Sekunden.

Phase 3 — Loslassen (Ablegen): Der Finger hebt vom Bildschirm ab. Das System beendet die Drag-Session und ruft den Drop-Callback des Zielelements auf. Wenn das Drop-Target das Ablegen ablehnt (z. B. Ziehen einer Datei in einen Ordner ohne Schreibberechtigung), kehrt die Drag-Vorschau animiert zur ursprünglichen Position zurück (Abbruch-Animation). Wenn das Ablegen akzeptiert wird, verschwindet das Element von der ursprünglichen Position und erscheint am Ziel.

App-übergreifendes Ziehen ist eine Funktion, die auf beiden Plattformen verfügbar ist. iOS unterstützt Drag-and-Drop zwischen Apps im Split View- und Slide Over-Modus (iPad). Android unterstützt das Ziehen zwischen Apps im Split Screen-Modus. Daten werden über UIPasteConfiguration (iOS) oder ClipData (Android) übertragen. Der Entwickler gibt die unterstützten Datentypen an (UTI für iOS, MIME für Android).

Drag-and-Drop auf iOS: UIDragInteraction

UIDragInteraction ist die wichtigste iOS-API zum Ziehen, die in iOS 11 hinzugefügt wurde. Um das Ziehen von einer View zu aktivieren, fügen Sie UIDragInteraction mit UIDragInteractionDelegate hinzu. Der Delegat definiert, welche Elemente ziehbar sind, ihr Aussehen und Verhalten. Zum Empfangen von Elementen verwenden Sie UIDropInteraction mit UIDropInteractionDelegate, der festlegt, ob die View ein Ablegen akzeptieren kann und wie die Daten zu verarbeiten sind.

// UIDragInteraction — Ziehen eines Elements aus einer Sammlung
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)

        // Drag-Vorschau — eine verkleinerte Kopie des Elements
        dragItem.previewProvider = {
            let previewView = UIImageView(image: thumbnailImage)
            previewView.alpha = 0.8
            return UIDragPreview(view: previewView)
        }
        return [dragItem]
    }
}

UIDropInteractionDelegate ist die Spiegel-Schnittstelle zum Empfangen von Ablagen. Die Methode canHandle(_:) prüft, ob der Datentyp unterstützt wird. sessionDidUpdate(_:) aktualisiert visuell den Zustand (Hervorhebung, Einfügelinie). performDrop(_:) führt die endgültige Datenverarbeitung durch. iOS ruft automatisch UIDropProposal mit dem Operationstyp auf: .move, .copy oder .forbidden. Der Operationstyp beeinflusst die visuelle Darstellung (ein +-Symbol in der Ecke der Vorschau zum Kopieren, ein Verbotszeichen für forbidden).

Drag-and-Drop auf Android: startDragAndDrop

View.startDragAndDrop() ist die Android SDK-Methode zum Starten eines Ziehvorgangs, verfügbar ab API 24 (Android 7.0). Sie wird nach dem Greifen des Elements (normalerweise in onLongClick) aufgerufen. Parameter: ClipData (Daten), DragShadowBuilder (visueller Schatten), Object myLocalState (lokaler Zustand), flags. DragShadowBuilder erstellt ein Bitmap, das dem Finger folgt. Das System verwaltet automatisch Animationen und Berührungsereignisse während des Ziehvorgangs.

// Drag-and-Drop eines RecyclerView-Elements mit Neuanordnung
class ReorderAdapter(private val items: MutableList<String>) :
    RecyclerView.Adapter<ReorderAdapter.ViewHolder>() {

    override fun onBindViewHolder(holder: ViewHolder, position: Int) {
        holder.itemView.setOnLongClickListener {
            // ClipData für Datenübertragung erstellen
            val clipData = ClipData.newPlainText("item", items[position])

            // Benutzerdefinierter DragShadowBuilder mit verkleinerter Vorschau
            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
        }
    }
}

Empfangen eines Ablegens wird auf Android über View.setOnDragListener() implementiert. Der Listener empfängt Ereignisse ACTION_DRAG_STARTED, ACTION_DRAG_ENTERED, ACTION_DRAG_LOCATION, ACTION_DRAG_EXITED, ACTION_DROP und ACTION_DRAG_ENDED. Im ACTION_DROP-Ereignis werden Daten aus ClipData extrahiert und die Zielaktion ausgeführt. Für RecyclerView mit Neuanordnung wird ItemTouchHelper.SimpleCallback empfohlen — ein integrierter Mechanismus, der automatisch Long Press zum Greifen, Bewegungsanimationen und die Hilfsmethoden onMove/onSwiped behandelt.

Anwendungsfälle von Drag-and-Drop

Listenneuanordnung (drag to reorder) ist das häufigste DnD-Szenario: Benutzer ziehen Listenelemente, um deren Reihenfolge zu ändern. Beispiele: Neuanordnen von Kontakten in Favoriten, Sortieren von Aufgaben in Trackern (Trello, Todoist), Neuanordnen von Titeln in einer Playlist (Spotify, Apple Music). Implementiert über ItemTouchHelper auf Android oder UILongPressGestureRecognizer mit Zellenneuanordnung auf iOS.

Dateimanager — Drag-and-Drop zum Kopieren und Verschieben von Dateien zwischen Ordnern. iOS Files App, Android Files by Google, Dropbox — alle unterstützen DnD. Das Ziehen einer Datei auf einen Ordner verschiebt sie hinein (move), das Ziehen bei gedrückter Option/Ctrl-Taste kopiert sie (copy). Das Drop-Target hebt beim Darüberfahren visuell hervor und zeigt die Ordnergrenzen an.

Kanban-Boards — Trello, Jira, Notion verwenden Drag-and-Drop, um Karten zwischen Spalten zu verschieben (To Do → In Progress → Done). Beim Ziehen löst sich die Karte von ihrer Quellspalte, folgt dem Finger und wird beim Überqueren der Grenze einer anderen Spalte mit Animation eingefügt. iOS 11+ unterstützt UIDragPreview mit Parallaxeffekt, bei dem die Vorschau leicht vom Berührungspunkt abweicht und Tiefe erzeugt.

Springboard-Abschnitte (iOS) — Ziehen von App-Symbolen auf dem iOS-Startbildschirm. Ein langer Druck auf ein Symbol aktiviert den „Wackelmodus“ (Symbole zittern), woraufhin der Benutzer Symbole zwischen Seiten verschieben und Ordner erstellen kann. Dies ist eines der komplexesten DnD-UX-Muster, da es die gleichzeitige Verarbeitung von Ziehen, Wackel-Animation und Ordnerbildung erfordert.

UX-Empfehlungen für Drag-and-Drop

Visuelles Feedback ist für Drag-and-Drop von entscheidender Bedeutung. Das gezogene Objekt sollte sich verändern: schrumpfen (iOS: Skalierung 0,8–0,9), halbtransparent werden (Alpha 0,7–0,8) und mit einem Schatten über die Oberfläche gehoben werden (shadow offset). Das Drop-Target sollte visuell auf das Darüberfahren reagieren: hervorheben, erweitern oder einen Rand anzeigen. Ohne diese Signale kann der Benutzer nicht erkennen, wo er das Objekt ablegen kann.

Rückkehranimation (Zieh-Abbruch) — wenn der Benutzer das Element außerhalb der Ablagezone oder über einer ungültigen Zone loslässt, sollte das Objekt animiert in seine ursprüngliche Position zurückkehren. iOS UIDragInteractionDelegate bietet dragInteraction(_:sessionDidMove:) zum Verfolgen und dragInteraction(_:session:willEndWith:) für die Rückkehranimation. Android View.setOnDragListener empfängt ACTION_DRAG_ENDED, wo eine Rückkehranimation über ValueAnimator oder ObjectAnimator gestartet werden kann.

Barrierefreiheit: Benutzer mit motorischen Einschränkungen können die Ziehgeste möglicherweise nicht ausführen. Bieten Sie Alternativen über „Nach oben/unten verschieben“-Schaltflächen für Listen und ein „In Ordner verschieben“-Kontextmenü für Dateien an. iOS VoiceOver unterstützt die Rotor-Aktion „Ziehen“ zum Verschieben von Elementen. Android TalkBack bietet benutzerdefinierte Aktionen über AccessibilityNodeInfo.addAction(). Nike Run Club und Apple Health verwenden DnD zum Neuanordnen von Metriken auf dem Dashboard — mit Zugriff über Standardschaltflächen.