Drag-and-Drop — essentie, Drag and Drop in mobiele applicaties

Wat is Drag-and-Drop?

Drag-and-Drop (DnD, slepen) — een methode om grafische interface-elementen te manipuleren waarbij de gebruiker een object met de vinger of muis vastpakt, het naar een andere positie verplaatst en loslaat. In mobiele interfaces wordt Drag-and-Drop meestal geïnitieerd door lang indrukken (Long Press) — de gebruiker houdt het element 300–500 ms vast, waarna het systeem de interface overschakelt naar sleepmodus en de vingerbeweging het object volgt.

Historisch verscheen Drag-and-Drop in desktopinterfaces (Xerox Star, 1981; Macintosh, 1984) als alternatief voor kopieer/plak-opdrachten. Op mobiele platforms verscheen volledige ondersteuning in iOS 11 (2017) met UIDragInteraction en in Android 7.0 (2016) met Multi-Window Drag-and-Drop. Daarvoor werd slepen in mobiele applicaties geïmplementeerd via aangepaste oplossingen met gesture recognizers.

Belangrijkste concepten: drag session (sleepsessie), drag items (gesleepte objecten), drag preview (visuele weergave van het object), drop target (neerzetzone), drop proposal (actie bij neerzetten: verplaatsen, kopiëren, koppelen). Het systeem beheert de sessie op besturingssysteemniveau, waardoor objecten tussen verschillende applicaties kunnen worden gesleept (bijv. een foto uit Galerij naar Notities).

Fasen van Drag-and-Drop

Drag-and-Drop is verdeeld in drie opeenvolgende fasen. Fase 1 — vastpakken (Drag Start): de gebruiker initieert het gebaar (meestal Long Press), het systeem creëert een sleepsessie, neemt de objectgegevens vast en toont drag preview — een halfdoorzichtige kopie van het element die de vinger volgt. In deze fase wijst het systeem andere gebaren (scrollen, tekstselectie) af tot DnD is voltooid.

Fase 2 — verplaatsen (Drag Move): de vinger beweegt over het scherm, drag preview volgt het aanraakpunt. Het systeem bepaalt continu de drop target onder de vinger en stuurt drag enter-, drag move- en drag exit-gebeurtenissen. De drop target kan visueel reageren: oplichten, uitzetten of een invoeglijn tonen. Deze fase duurt 0,5 tot 10+ seconden, afhankelijk van de complexiteit van de taak.

Fase 3 — loslaten (Drop): de vinger wordt van het scherm gehaald. Het systeem beëindigt de sleepsessie en roept de drop-callback aan bij het doelelement. Als de drop target het neerzetten weigert (bijv. een bestand naar een map zonder schrijfrechten slepen), keert drag preview geanimeerd terug naar de oorspronkelijke positie (cancel animation). Als het neerzetten wordt geaccepteerd, verdwijnt het element van de oorspronkelijke positie en verschijnt op de doelpositie.

Slepen tussen applicaties — functie beschikbaar op beide platforms. iOS ondersteunt Drag-and-Drop tussen applicaties in Split View- en Slide Over-modus (iPad). Android ondersteunt slepen tussen applicaties in Split Screen-modus. Gegevens worden overgedragen via UIPasteConfiguration (iOS) of ClipData (Android). De ontwikkelaar specificeert de ondersteunde gegevenstypen (UTI voor iOS, MIME voor Android).

Drag-and-Drop in iOS: UIDragInteraction

UIDragInteraction — de belangrijkste iOS API voor slepen, toegevoegd in iOS 11. Om slepen vanuit een View in te schakelen, voegt u UIDragInteraction toe met UIDragInteractionDelegate. De delegaat bepaalt welke elementen worden gesleept, hun uiterlijk en gedrag. Voor het ontvangen van elementen wordt UIDropInteraction met UIDropInteractionDelegate gebruikt, die bepaalt of de View het neerzetten kan accepteren en hoe de gegevens moeten worden verwerkt.

// UIDragInteraction — slepen van element uit collectie
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 preview — verkleinde kopie van het element
        dragItem.previewProvider = {
            let previewView = UIImageView(image: thumbnailImage)
            previewView.alpha = 0.8
            return UIDragPreview(view: previewView)
        }
        return [dragItem]
    }
}

UIDropInteractionDelegate — de spiegelinterface voor het ontvangen van neerzetten. De methode canHandle(_:) controleert of het gegevenstype wordt ondersteund. sessionDidUpdate(_:) werkt de status visueel bij (verlichting, invoeglijn). performDrop(_:) voert de uiteindelijke gegevensverwerking uit. iOS roept automatisch UIDropProposal aan met het bewerkingstype: .move (verplaatsen), .copy (kopiëren), .forbidden (verboden). Het bewerkingstype beïnvloedt de visuele weergave (pictogram + in de hoek van preview voor kopiëren, verbodsteken voor forbidden).

Drag-and-Drop in Android: startDragAndDrop

View.startDragAndDrop() — Android SDK-methode om te beginnen met slepen, beschikbaar vanaf API 24 (Android 7.0). Wordt aangeroepen na het vastpakken van het element (meestal in onLongClick). Parameters: ClipData (gegevens), DragShadowBuilder (visuele schaduw), Object myLocalState (lokale status), flags. DragShadowBuilder maakt een Bitmap die de vinger volgt. Het systeem beheert automatisch de animatie en aanraakgebeurtenissen tijdens het slepen.

// Drag-and-Drop van RecyclerView-element met herordenen
class ReorderAdapter(private val items: MutableList<String>) :
    RecyclerView.Adapter<ReorderAdapter.ViewHolder>() {

    override fun onBindViewHolder(holder: ViewHolder, position: Int) {
        holder.itemView.setOnLongClickListener {
            // ClipData maken voor gegevensoverdracht
            val clipData = ClipData.newPlainText("item", items[position])

            // Aangepaste DragShadowBuilder met verkleinde preview
            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
        }
    }
}

Ontvangen van neerzetten in Android wordt geïmplementeerd via View.setOnDragListener(). De luisteraar ontvangt de gebeurtenissen ACTION_DRAG_STARTED, ACTION_DRAG_ENTERED, ACTION_DRAG_LOCATION, ACTION_DRAG_EXITED, ACTION_DROP, ACTION_DRAG_ENDED. In de ACTION_DROP-gebeurtenis worden gegevens uit ClipData gehaald en wordt de doelactie uitgevoerd. Voor RecyclerView met herordenen wordt ItemTouchHelper.SimpleCallback aanbevolen — een ingebouwd mechanisme dat automatisch Long Press voor vastpakken, de verplaatsingsanimatie van elementen en de hulpmethoden onMove/onSwiped afhandelt.

Gebruiksscenario’s van Drag-and-Drop

Lijsten herordenen (drag to reorder) — het meest voorkomende DnD-scenario: de gebruiker sleept lijstelementen om hun volgorde te wijzigen. Voorbeelden: contacten herschikken in favorieten, taken sorteren in trackers (Trello, Todoist), de volgorde van nummers in een afspeellijst wijzigen (Spotify, Apple Music). Geïmplementeerd via ItemTouchHelper in Android of UILongPressGestureRecognizer + cellen herschikken in iOS.

Bestandsbeheerders — Drag-and-Drop voor het kopiëren en verplaatsen van bestanden tussen mappen. iOS Files App, Android Files by Google, Dropbox — allemaal ondersteunen ze DnD. Een bestand naar een map slepen verplaatst het naar binnen (move), slepen met ingedrukte Option/Ctrl-toets kopieert het (copy). De drop target licht visueel op bij nadering en toont de mapgrenzen.

Kanban-borden — Trello, Jira, Notion gebruiken Drag-and-Drop om kaarten tussen kolommen te verplaatsen (To Do → In Progress → Done). Tijdens het slepen maakt de kaart los van de bronkolom, volgt de vinger en wordt bij het overschrijden van de grens van een andere kolom met animatie ingevoegd. iOS 11+ ondersteunt UIDragPreview met parallax-effect, waarbij de preview iets afwijkt van het aanraakpunt, wat diepte creëert.

Springboard-secties (iOS) — het slepen van app-pictogrammen op het startscherm van iOS. Lang indrukken van een pictogram activeert de “jiggling”-modus (pictogrammen trillen), waarna de gebruiker pictogrammen tussen pagina’s kan verplaatsen en mappen kan maken. Dit is een van de meest complexe DnD UX-patronen, omdat het gelijktijdig slepen, trilanimatie en groeperen in mappen vereist.

UX-aanbevelingen voor Drag-and-Drop

Visuele feedback — cruciaal voor Drag-and-Drop. Het gesleepte object moet veranderen: kleiner worden (iOS: scale 0.8–0.9), halfdoorzichtig worden (alpha 0.7–0.8) en boven de interface uitstijgen met schaduw (shadow offset). De drop target moet visueel reageren bij nadering: oplichten (highlight), uitzetten (expand) of randen tonen (border). Zonder deze signalen begrijpt de gebruiker niet waar het object kan worden neergezet.

Terugkeeranimatie (drag cancel) — als de gebruiker het element buiten de neerzetzone of boven een ongeldige zone loslaat, moet het object geanimeerd terugkeren naar de oorspronkelijke positie. iOS UIDragInteractionDelegate biedt dragInteraction(_:sessionDidMove:) voor het volgen en dragInteraction(_:session:willEndWith:) voor de terugkeeranimatie. Android View.setOnDragListener ontvangt ACTION_DRAG_ENDED, waar de terugkeeranimatie kan worden gestart via ValueAnimator of ObjectAnimator.

Toegankelijkheid: gebruikers met motorische beperkingen kunnen het sleepgebaar mogelijk niet uitvoeren. Bied alternatieven via “Omhoog/omlaag verplaatsen”-knoppen voor lijsten, contextmenu “Naar map verplaatsen” voor bestanden. iOS VoiceOver ondersteunt de rotoractie “Drag” voor het verplaatsen van elementen. Android TalkBack biedt aangepaste acties via AccessibilityNodeInfo.addAction(). Nike Run Club en Apple Health gebruiken DnD voor het herordenen van metrieken op het dashboard — met toegang via standaardknoppen.