Drag-and-Drop — podstata, Drag and Drop v mobilních aplikacích

Co je Drag-and-Drop?

Drag-and-Drop (DnD, přetahování) — metoda manipulace s grafickými prvky rozhraní, při které uživatel uchopí objekt prstem nebo myší, přesune jej na jinou pozici a pustí. V mobilních rozhraních je Drag-and-Drop obvykle zahájen dlouhým stiskem (Long Press) — uživatel drží prvek po dobu 300–500 ms, poté systém přepne rozhraní do režimu přetahování a pohyb prstu objekt následuje.

Historicky se Drag-and-Drop objevil v desktopových rozhraních (Xerox Star, 1981; Macintosh, 1984) jako alternativa k příkazům kopírovat/vložit. Na mobilních platformách se plná podpora objevila v iOS 11 (2017) s UIDragInteraction a v Android 7.0 (2016) s Multi-Window Drag-and-Drop. Předtím bylo přetahování v mobilních aplikacích implementováno pomocí vlastních řešení s gesture recognizers.

Klíčové koncepty: drag session (relace přetahování), drag items (přetahované objekty), drag preview (vizuální obraz objektu), drop target (zóna puštění), drop proposal (akce při puštění: přesunout, kopírovat, propojit). Systém spravuje relaci na úrovni operačního systému, což umožňuje přetahovat objekty mezi různými aplikacemi (např. fotku z Galerie do Poznámek).

Fáze Drag-and-Drop

Drag-and-Drop se dělí na tři po sobě jdoucí fáze. Fáze 1 — uchopení (Drag Start): uživatel zahájí gesto (obvykle Long Press), systém vytvoří relaci přetahování, zachytí data objektu a zobrazí drag preview — prþsvitnou kopii prvku následující prst. V této fázi systém odmítá jiná gesta (posouvání, výběr textu) až do dokončení DnD.

Fáze 2 — přesun (Drag Move): prst se pohybuje po obrazovce, drag preview následuje bod dotyku. Systém průběžně určuje drop target pod prstem a odesílá události drag enter, drag move a drag exit. Drop target může vizuálně reagovat: rozsvítit se, rozšířit se nebo zobrazit čáru vložení. Tato fáze trvá od 0,5 do 10+ sekund v závislosti na složitosti úkolu.

Fáze 3 — puštění (Drop): prst se zvedne z obrazovky. Systém ukončí relaci přetahování a zavolá drop callback u cílového prvku. Pokud drop target odmítne puštění (např. přetahování souboru do složky bez práv zápisu), drag preview se animovaně vrátí na původní pozici (cancel animation). Pokud je puštění přijato, prvek zmizí z původní pozice a objeví se na cílové.

Přetahování mezi aplikacemi — funkce dostupná na obou platformách. iOS podporuje Drag-and-Drop mezi aplikacemi v režimu Split View a Slide Over (iPad). Android podporuje přetahování mezi aplikacemi v režimu Split Screen. Data jsou předávána prostřednictvím UIPasteConfiguration (iOS) nebo ClipData (Android). Vývojář určuje podporované typy dat (UTI pro iOS, MIME pro Android).

Drag-and-Drop v iOS: UIDragInteraction

UIDragInteraction — hlavní API iOS pro přetahování, přidané v iOS 11. Pro povolení přetahování z View přidejte UIDragInteraction s UIDragInteractionDelegate. Delegát určuje, které prvky jsou přetahovány, jejich vzhled a chování. Pro příjem prvků se používá UIDropInteraction s UIDropInteractionDelegate, který určuje, zda View může přijmout puštění a jak zpracovat data.

// UIDragInteraction — přetahování prvku z kolekce
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 — zmenšená kopie prvku
        dragItem.previewProvider = {
            let previewView = UIImageView(image: thumbnailImage)
            previewView.alpha = 0.8
            return UIDragPreview(view: previewView)
        }
        return [dragItem]
    }
}

UIDropInteractionDelegate — zrcadlové rozhraní pro příjem puštění. Metoda canHandle(_:) kontroluje, zda je typ dat podporován. sessionDidUpdate(_:) vizuálně aktualizuje stav (zvýraznění, čára vložení). performDrop(_:) provádí konečné zpracování dat. iOS automaticky volá UIDropProposal s typem operace: .move (přesunout), .copy (kopírovat), .forbidden (zakázáno). Typ operace ovlivňuje vizuální zobrazení (ikona + v rohu preview pro kopírování, zákazová značka pro forbidden).

Drag-and-Drop v Androidu: startDragAndDrop

View.startDragAndDrop() — metoda Android SDK pro zahájení přetahování, dostupná od API 24 (Android 7.0). Volá se po uchopení prvku (obvykle v onLongClick). Parametry: ClipData (data), DragShadowBuilder (vizuální stín), Object myLocalState (lokální stav), flags. DragShadowBuilder vytváří Bitmap, který následuje prst. Systém automaticky spravuje animaci a dotykové události během přetahování.

// Drag-and-Drop prvku RecyclerView s přeskupováním
class ReorderAdapter(private val items: MutableList<String>) :
    RecyclerView.Adapter<ReorderAdapter.ViewHolder>() {

    override fun onBindViewHolder(holder: ViewHolder, position: Int) {
        holder.itemView.setOnLongClickListener {
            // Vytváříme ClipData pro přenos dat
            val clipData = ClipData.newPlainText("item", items[position])

            // Vlastní DragShadowBuilder se zmenšeným 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
        }
    }
}

Příjem puštění v Androidu je implementován pomocí View.setOnDragListener(). Posluchač přijímá události ACTION_DRAG_STARTED, ACTION_DRAG_ENTERED, ACTION_DRAG_LOCATION, ACTION_DRAG_EXITED, ACTION_DROP, ACTION_DRAG_ENDED. V události ACTION_DROP jsou data extrahována z ClipData a je provedena cílová akce. Pro RecyclerView s přeskupováním se doporučuje ItemTouchHelper.SimpleCallback — vestavěný mechanismus, který automaticky zpracovává Long Press pro uchopení, animaci přesunu prvků a pomocné metody onMove/onSwiped.

Scénáře použití Drag-and-Drop

Přeskupování seznamů (drag to reorder) — nejčastější scénář DnD: uživatel přetahuje prvky seznamu pro změnu jejich pořadí. Příklady: přeskupení kontaktů v oblíbených, třídění úkolů v trackerech (Trello, Todoist), změna pořadí skladeb v playlistu (Spotify, Apple Music). Implementuje se pomocí ItemTouchHelper v Androidu nebo UILongPressGestureRecognizer + přeskupení buněk v iOS.

Správci souborů — Drag-and-Drop pro kopírování a přesun souborů mezi složkami. iOS Files App, Android Files by Google, Dropbox — všechny podporují DnD. Přetažení souboru na složku jej přesune dovnitř (move), přetažení se stisknutou klávesou Option/Ctrl jej kopíruje (copy). Drop target se vizuálně rozsvítí při najetí a ukazuje hranice složky.

Kanban tabule — Trello, Jira, Notion používají Drag-and-Drop pro přesun karet mezi sloupci (To Do → In Progress → Done). Během přetahování se karta oddělí od zdrojového sloupce, následuje prst a při překročení hranice jiného sloupce je vložena s animací. iOS 11+ podporuje UIDragPreview s efektem paralaxy, kde se preview mírně odchyluje od bodu dotyku, což vytváří hloubku.

Sekce Springboard (iOS) — přetahování ikon aplikací na domovské obrazovce iOS. Dlouhý stisk ikony aktivuje režim „jiggling” (ikony se třesou), poté může uživatel přesouvat ikony mezi stránkami a vytvářet složky. To je jeden z nejsložitějších UX vzorů DnD, protože vyžaduje současné řízení přetahování, animace třesení a seskupování do složek.

Doporučení UX pro Drag-and-Drop

Vizuální zpětná vazba — kritická pro Drag-and-Drop. Přetahovaný objekt by se měl změnit: zmenšit se (iOS: scale 0.8–0.9), stát se průhledným (alpha 0.7–0.8) a zvednout se nad rozhraní se stínem (shadow offset). Drop target by měl vizuálně reagovat na najetí: rozsvítit se (highlight), rozšířit se (expand) nebo zobrazit okraje (border). Bez těchto signálů uživatel nepochopí, kam může objekt pustit.

Animace návratu (drag cancel) — pokud uživatel pustí prvek mimo zónu puštění nebo nad neplatnou zónou, objekt by se měl animovaně vrátit na původní pozici. iOS UIDragInteractionDelegate poskytuje dragInteraction(_:sessionDidMove:) pro sledování a dragInteraction(_:session:willEndWith:) pro animaci návratu. Android View.setOnDragListener přijímá ACTION_DRAG_ENDED, kde lze spustit animaci návratu pomocí ValueAnimator nebo ObjectAnimator.

Přístupnost: uživatelé s motorickým omezením nemusí být schopni provést gesto přetahování. Poskytněte alternativy pomocí tlačítek „Přesunout nahoru/dolů” pro seznamy, kontextové nabídky „Přesunout do složky” pro soubory. iOS VoiceOver podporuje rotorovou akci „Drag” pro přesun prvků. Android TalkBack poskytuje vlastní akce prostřednictvím AccessibilityNodeInfo.addAction(). Nike Run Club a Apple Health používají DnD pro přeskupování metrik na dashboardu — s přístupem pomocí standardních tlačítek.