Implementing Drag-and-Drop for Mobile Apps
Dragging elements looks like simple animation, but hides complex coordination: detecting gesture start, creating visual copy of dragged element, hit-testing drop zones, updating data model, cancel animation. Each step is potential bug.
iOS: UIKit Drag-and-Drop
From iOS 11 Apple provides built-in Drag & Drop API via UIDragInteraction and UIDropInteraction. UIDragInteraction added to source view, UIDropInteraction to target view. Data transmitted via NSItemProvider—universal container for any data types.
let dragInteraction = UIDragInteraction(delegate: self)
view.addInteraction(dragInteraction)
Key delegate method: dragInteraction(_:itemsForBeginning:) must return [UIDragItem] with NSItemProvider. For internal drag & drop (within one app) can transmit any object via localObject property of UIDragItem—not serialized, available instantly.
For UICollectionView and UITableView specialized UICollectionViewDragDelegate / UITableViewDragDelegate with methods collectionView(_:itemsForBeginningDragSession:at:). Built-in reorder support via collectionView(_:moveItemAt:to:)—no manual cell animation management.
UICollectionView drag issues. On dragging, collection automatically creates snapshot of dragged cell. If cell contains AVPlayerLayer or custom CALayer animations—snapshot looks frozen. Solution: override dragPreviewParametersForItemAt: and return UIDragPreviewParameters with custom visiblePath.
In SwiftUI—.draggable() and .dropDestination() modifiers from iOS 16. Data must conform to Transferable protocol. Custom types—implement Transferable via CodableRepresentation or DataRepresentation.
Android: Drag & Drop
On Android View.startDragAndDrop() (API 24+, earlier startDrag()). DragShadowBuilder creates visual shadow on dragging—override onDrawShadow() for custom appearance. View.setOnDragListener() on target view handles events ACTION_DRAG_ENTERED, ACTION_DRAG_EXITED, ACTION_DROP, ACTION_DRAG_ENDED.
In Jetpack Compose—Modifier.dragAndDropSource {} and Modifier.dragAndDropTarget {} appeared in Compose 1.5. DragAndDropTransferData with ClipData as container. For drag inside LazyColumn with reorder—reorderable library (Calvin Liang) or compose-reorderable.
Flutter: Custom Implementation
Flutter lacks built-in drag & drop at native level. Draggable<T> and DragTarget<T>—main widgets. Draggable creates childWhenDragging (placeholder at original) and feedback (widget following finger). DragTarget.onWillAcceptWithDetails() for checking, onAcceptWithDetails() for handling.
For list reorder—ReorderableListView from Material library. onReorder callback gets oldIndex and newIndex. Important bug: when newIndex > oldIndex do newIndex -= 1 before list.insert(). Documentation mentions it but developers often miss.
Common Implementation Problems
Haptic on drag start. On iOS UIFeedbackGenerator.impactOccurred() when longPressGestureRecognizer.state == .began. User feels "grasp" of object. Without this drag feels weightless.
Scroll during drag. User drags element to list edge—list should scroll. In UIKit—UIScrollView auto-scroll at 50pt from edge. In Flutter—DragTarget with ScrollController.animateTo() in DragTarget.onWillAccept() when cursor within 80px of edge.
Drag cancellation. If user dropped element outside valid zone—snap-back animation to original position. In UIKit happens automatically. In Flutter—manage via Draggable.onDraggableCanceled() with Velocity and coordinates.
Data model state. On reorder—update dataSource synchronously with animation, not after. Otherwise rapid drag of multiple elements causes indices to scatter.
Timeline: implementing drag & drop for specific screen (list with reorder or drag between two zones)—2–3 days. Complex system with multiple draggable object types, cross-view drop and custom animations—5–7 days.