Drag-and-Drop — lényege, Drag and Drop mobilalkalmazásokban

Mi az a Drag-and-Drop?

Drag-and-Drop (DnD, húzás) — a grafikus interfész elemek manipulálásának módszere, amikor a felhasználó megfog egy objektumot az ujjával vagy egérrel, áthelyezi egy másik pozícióba és elengedi. Mobil interfészeken a Drag-and-Drop általában hosszú megnyomással (Long Press) indul — a felhasználó 300–500 ms-ig tartja az elemet, majd a rendszer átkapcsolja az interfészt húzási módba, és az ujj mozgása magával viszi az objektumot.

Történetileg a Drag-and-Drop asztali interfészeken (Xerox Star, 1981; Macintosh, 1984) jelent meg a másolás/beillesztés parancsok alternatívájaként. Mobil platformokon a teljes támogatás iOS 11-ben (2017) az UIDragInteraction-nel és Android 7.0-ban (2016) a Multi-Window Drag-and-Drop-pal jelent meg. Ezelőtt a mobilalkalmazásokban a húzás egyedi megoldásokkal, gesture recognizers segítségével valósult meg.

Kulcsfontosságú fogalmak: drag session (húzási munkamenet), drag items (húzott objektumok), drag preview (az objektum vizuális képe), drop target (ledobási zóna), drop proposal (művelet ledobáskor: áthelyezés, másolás, összekapcsolás). A rendszer operációs rendszer szintjén kezeli a munkamenetet, ami lehetővé teszi az objektumok húzását különböző alkalmazások között (pl. egy fotó a Galériából a Jegyzetekbe).

A Drag-and-Drop fázisai

Drag-and-Drop három egymást követő fázisra oszlik. 1. fázis — megfogás (Drag Start): a felhasználó elindítja a mozdulatot (általában Long Press), a rendszer létrehoz egy húzási munkamenetet, lekéri az objektum adatait és megjeleníti a drag preview-t — az elemről készült fálig átlátszó másolat, amely követi az ujjat. Ebben a fázisban a rendszer elutasítja a más mozdulatokat (görgetés, szövegkijelölés) a DnD befejezéséig.

2. fázis — mozgatás (Drag Move): az ujj mozog a képernyőn, a drag preview követi az érintési pontot. A rendszer folyamatosan meghatározza a drop target-et az ujj alatt, és drag enter, drag move és drag exit eseményeket küld. A drop target vizuálisan reagálhat: kigyulladhat, kitágulhat vagy beillesztési vonalat mutathat. Ez a fázis a feladat összetettségétől függően 0,5 másodperctől 10+ másodpercig tart.

3. fázis — elengedés (Drop): az ujj felemelkedik a képernyőről. A rendszer befejezi a húzási munkamenetet és meghívja a drop callback-et a célelemnél. Ha a drop target elutasítja a ledobást (pl. fájlt húzunk egy írási jogosultság nélküli mappába), a drag preview animálva visszatér az eredeti pozícióba (cancel animation). Ha a ledobás elfogadásra kerül, az elem eltűnik az eredeti pozícióból és megjelenik a célpozícióban.

Alkalmazások közötti húzás — mindkét platformon elérhető funkció. Az iOS támogatja a Drag-and-Drop-ot alkalmazások között Split View és Slide Over módban (iPad). Az Android támogatja a húzást alkalmazások között Split Screen módban. Az adatokat UIPasteConfiguration (iOS) vagy ClipData (Android) segítségével továbbítják. A fejlesztő megadja a támogatott adattípusokat (UTI iOS-hez, MIME Androidhoz).

Drag-and-Drop iOS-ben: UIDragInteraction

UIDragInteraction — az iOS fő API-ja a húzáshoz, amely iOS 11-ben került hozzáadásra. A View-ból történő húzás engedélyezéséhez adja hozzá a UIDragInteraction-t UIDragInteractionDelegate-dzsel. A delegált meghatározza, hogy mely elemek húzhatók, azok megjelenését és viselkedését. Az elemek fogadásához UIDropInteraction-t használnak UIDropInteractionDelegate-dzsel, amely meghatározza, hogy a View elfogadhatja-e a ledobást és hogyan dolgozza fel az adatokat.

// UIDragInteraction — elem húzása a gyűjteményből
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 — az elem kicsinyített másolata
        dragItem.previewProvider = {
            let previewView = UIImageView(image: thumbnailImage)
            previewView.alpha = 0.8
            return UIDragPreview(view: previewView)
        }
        return [dragItem]
    }
}

UIDropInteractionDelegate — a ledobás fogadásának tükörfelülete. A canHandle(_:) metódus ellenőrzi, hogy az adattípus támogatott-e. A sessionDidUpdate(_:) vizuálisan frissíti az állapotot (kigyulladás, beillesztési vonal). A performDrop(_:) végrehajtja az adatok végső feldolgozását. Az iOS automatikusan meghívja a UIDropProposal-t a művelet típusával: .move (áthelyezés), .copy (másolás), .forbidden (tilos). A művelet típusa befolyásolja a vizuális megjelenítést (ikon + a preview sarkában másoláshoz, tiltási jel a forbidden-hez).

Drag-and-Drop Androidban: startDragAndDrop

View.startDragAndDrop() — az Android SDK metódusa a húzás megkezdéséhez, API 24-től (Android 7.0) érhető el. Az elem megfogása után hívódik (általában onLongClick-ben). Paraméterek: ClipData (adatok), DragShadowBuilder (vizuális árnyék), Object myLocalState (helyi állapot), flags. A DragShadowBuilder létrehoz egy Bitmap-et, amely követi az ujjat. A rendszer automatikusan kezeli az animációt és az érintési eseményeket a húzás során.

// Drag-and-Drop átrendezéssel a RecyclerView elemhez
class ReorderAdapter(private val items: MutableList<String>) :
    RecyclerView.Adapter<ReorderAdapter.ViewHolder>() {

    override fun onBindViewHolder(holder: ViewHolder, position: Int) {
        holder.itemView.setOnLongClickListener {
            // ClipData létrehozása adattovábbításhoz
            val clipData = ClipData.newPlainText("item", items[position])

            // Egyedi DragShadowBuilder kicsinyített preview-val
            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
        }
    }
}

Ledobás fogadása Androidban a View.setOnDragListener() segítségével valósul meg. A figyelő megkapja az ACTION_DRAG_STARTED, ACTION_DRAG_ENTERED, ACTION_DRAG_LOCATION, ACTION_DRAG_EXITED, ACTION_DROP, ACTION_DRAG_ENDED eseményeket. Az ACTION_DROP eseményben az adatok kinyerésre kerülnek a ClipData-ból és a célművelet végrehajtásra kerül. A RecyclerView átrendezéséhez az ItemTouchHelper.SimpleCallback ajánlott — egy beépített mechanizmus, amely automatikusan kezeli a Long Press-t a megfogáshoz, az elemek mozgatásának animációját és az onMove/onSwiped segédmetódusokat.

A Drag-and-Drop alkalmazási forgatókönyvei

Listák átrendezése (drag to reorder) — a leggyakoribb DnD forgatókönyv: a felhasználó húza a lista elemeit, hogy megváltoztassa a sorrendjüket. Példák: kapcsolatok átrendezése a kedvencekben, feladatok rendezése trackerekben (Trello, Todoist), számok sorrendjének megváltoztatása a lejátszási listán (Spotify, Apple Music). Androidban ItemTouchHelper-rel, iOS-ben UILongPressGestureRecognizer + cellák átrendezésével valósul meg.

Fájlkezelők — Drag-and-Drop fájlok másolására és áthelyezésére mappák között. iOS Files App, Android Files by Google, Dropbox — mindegyik támogatja a DnD-t. Fájl mappára húzása áthelyezi azt (move), húzás lenyomott Option/Ctrl billentyűvel másolja (copy). Drop target vizuálisan kigyullad közeledéskor, megmutatva a mappa határait.

Kanban táblák — Trello, Jira, Notion Drag-and-Drop-ot használ a kártyák oszlopok közötti mozgatásához (To Do → In Progress → Done). Húzás közben a kártya leválik a forrásoszlopról, követi az ujjat, és egy másik oszlop határának átlépésekor animációval kerül beillesztésre. Az iOS 11+ támogatja a UIDragPreview-t parallaxis effektussal, ahol a preview kissé eltér az érintési ponttól, mélységet teremtve.

Springboard szekciók (iOS) — alkalmazásikonok húzása az iOS kezdőképernyőjén. Egy ikon hosszú megnyomása aktiválja a „jiggling” módot (az ikonok remegnek), ezután a felhasználó áthelyezheti az ikonokat oldalak között és mappákat hozhat létre. Ez az egyik legösszetettebb DnD UX minta, mert egyidejűleg igényli a húzás, a remegés animáció és a mappákba csoportosítás kezelését.

UX ajánlások a Drag-and-Drop-hoz

Vizuális visszacsatolás — kritikus fontosságú a Drag-and-Drop számára. A húzott objektumnak meg kell változnia: kisebbé kell válnia (iOS: scale 0.8–0.9), fálig átlátszóvá kell válnia (alpha 0.7–0.8) és árnyékkal az interfész fölé kell emelkednie (shadow offset). A drop target-nek vizuálisan reagálnia kell közeledéskor: kigyulladni (highlight), kitágulni (expand) vagy szegélyeket mutatni (border). Ezen jelek nélkül a felhasználó nem érti, hova dobhatja le az objektumot.

Visszatérési animáció (drag cancel) — ha a felhasználó a ledobási zónán kívül vagy érvénytelen zóna fölött engedi el az elemet, az objektumnak animálva vissza kell térnie az eredeti pozícióba. Az iOS UIDragInteractionDelegate biztosítja a dragInteraction(_:sessionDidMove:) metódust a követéshez és a dragInteraction(_:session:willEndWith:) metódust a visszatérési animációhoz. Az Android View.setOnDragListener megkapja az ACTION_DRAG_ENDED eseményt, ahol ValueAnimator vagy ObjectAnimator segítségével elindítható a visszatérési animáció.

Akadálymentesítés: a mozgáskorlátozott felhasználók esetleg nem tudják végrehajtani a húzási mozdulatot. Biztosítson alternatívákat „Mozgatás fel/le” gombokkal listákhoz, „Mozgatás mappába” helyi menüvel fájlokhoz. Az iOS VoiceOver támogatja a „Drag” rotor műveletet elemek mozgatásához. Az Android TalkBack egyedi műveleteket biztosít az AccessibilityNodeInfo.addAction()-on keresztül. A Nike Run Club és az Apple Health DnD-t használ a metrikák átrendezéséhez a dashboardon — standard gombokon keresztüli hozzáféréssel.