Drag-and-Drop — How Drag and Drop Works in Mobile Applications

What Is Drag-and-Drop?

Drag-and-Drop (DnD) is a method of manipulating graphical interface elements where the user grabs an object with their finger or mouse, moves it to another position, and releases it. In mobile interfaces, Drag-and-Drop is usually initiated by a long press — the user holds the element for 300–500 ms, after which the system switches the interface to drag mode, and the finger movement moves the object along.

Historically, Drag-and-Drop originated in desktop interfaces (Xerox Star, 1981; Macintosh, 1984) as an alternative to copy/paste commands. On mobile platforms, full support appeared in iOS 11 (2017) with UIDragInteraction and in Android 7.0 (2016) with Multi-Window Drag-and-Drop. Before that, dragging in mobile apps was implemented through custom solutions using gesture recognizers.

Key concepts: drag session, drag items, drag preview (visual representation of the object), drop target (drop zone), drop proposal (action on drop: move, copy, link). The system manages the session at the operating system level, allowing objects to be dragged between different applications (e.g., a photo from Gallery to Notes).

Phases of Drag-and-Drop

Drag-and-Drop is divided into three sequential phases. Phase 1 — Grab (Drag Start): the user initiates the gesture (usually Long Press), the system creates a drag session, captures the object’s data, and displays a drag preview — a semi-transparent copy of the element that follows the finger. In this phase, the system rejects other gestures (scrolling, text selection) until DnD completes.

Phase 2 — Move (Drag Move): the finger moves across the screen, the drag preview follows the touch point. The system continuously determines the drop target under the finger and sends drag-enter, drag-move, and drag-exit events. The drop target can react visually: highlight, expand, or show an insertion line. This phase lasts from 0.5 to 10+ seconds depending on the task complexity.

Phase 3 — Release (Drop): the finger lifts off the screen. The system ends the drag session and calls the drop callback on the target element. If the drop target rejects the drop (e.g., dragging a file into a folder without write permissions), the drag preview animates back to the original position (cancel animation). If the drop is accepted, the element disappears from the original position and appears at the target.

Cross-app dragging is a feature available on both platforms. iOS supports Drag-and-Drop between apps in Split View and Slide Over modes (iPad). Android supports dragging between apps in Split Screen mode. Data is transferred via UIPasteConfiguration (iOS) or ClipData (Android). The developer specifies supported data types (UTI for iOS, MIME for Android).

Drag-and-Drop in iOS: UIDragInteraction

UIDragInteraction is the main iOS API for dragging, added in iOS 11. To enable dragging from a View, add UIDragInteraction with a UIDragInteractionDelegate. The delegate defines which elements are draggable, their appearance, and behavior. To receive elements, use UIDropInteraction with a UIDropInteractionDelegate, which determines whether the View can accept a drop and how to process the data.

// UIDragInteraction — dragging an element from a collection
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 — a reduced copy of the element
        dragItem.previewProvider = {
            let previewView = UIImageView(image: thumbnailImage)
            previewView.alpha = 0.8
            return UIDragPreview(view: previewView)
        }
        return [dragItem]
    }
}

UIDropInteractionDelegate is the mirror interface for receiving drops. The canHandle(_:) method checks whether the data type is supported. sessionDidUpdate(_:) visually updates the state (highlight, insertion line). performDrop(_:) performs the final data processing. iOS automatically calls UIDropProposal with the operation type: .move, .copy, or .forbidden. The operation type affects the visual display (a + icon in the corner of the preview for copy, a prohibition sign for forbidden).

Drag-and-Drop in Android: startDragAndDrop

View.startDragAndDrop() is the Android SDK method for starting a drag, available since API 24 (Android 7.0). It is called after grabbing the element (usually in onLongClick). Parameters: ClipData (data), DragShadowBuilder (visual shadow), Object myLocalState (local state), flags. DragShadowBuilder creates a Bitmap that follows the finger. The system automatically manages animations and touch events during the drag.

// Drag-and-Drop of a RecyclerView element with reordering
class ReorderAdapter(private val items: MutableList<String>) :
    RecyclerView.Adapter<ReorderAdapter.ViewHolder>() {

    override fun onBindViewHolder(holder: ViewHolder, position: Int) {
        holder.itemView.setOnLongClickListener {
            // Creating ClipData for data transfer
            val clipData = ClipData.newPlainText("item", items[position])

            // Custom DragShadowBuilder with a reduced 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
        }
    }
}

Receiving a drop in Android is implemented through View.setOnDragListener(). The listener receives ACTION_DRAG_STARTED, ACTION_DRAG_ENTERED, ACTION_DRAG_LOCATION, ACTION_DRAG_EXITED, ACTION_DROP, and ACTION_DRAG_ENDED events. In the ACTION_DROP event, data is extracted from ClipData and the target action is performed. For RecyclerView with reordering, ItemTouchHelper.SimpleCallback is recommended — a built-in mechanism that automatically handles Long Press for grabbing, move animation, and utility methods onMove/onSwiped.

Drag-and-Drop Use Cases

List reordering (drag to reorder) is the most common DnD scenario: users drag list items to change their order. Examples: rearranging contacts in favorites, sorting tasks in trackers (Trello, Todoist), reordering tracks in a playlist (Spotify, Apple Music). Implemented via ItemTouchHelper in Android or UILongPressGestureRecognizer with cell reordering in iOS.

File managers — Drag-and-Drop for copying and moving files between folders. iOS Files App, Android Files by Google, Dropbox — all support DnD. Dragging a file onto a folder moves it inside (move), dragging with Option/Ctrl held copies it (copy). The drop target visually highlights on hover, showing the folder boundaries.

Kanban boards — Trello, Jira, Notion use Drag-and-Drop to move cards between columns (To Do → In Progress → Done). When dragging, the card detaches from its source column, follows the finger, and when crossing the boundary of another column, it inserts with animation. iOS 11+ supports UIDragPreview with a parallax effect, where the preview slightly tilts away from the touch point, creating depth.

Springboard sections (iOS) — dragging app icons on the iOS home screen. A long press on an icon activates “jiggling” mode (icons shake), after which the user can move icons between pages and create folders. This is one of the most complex DnD UX patterns as it requires simultaneous handling of dragging, shake animation, and folder grouping.

UX Recommendations for Drag-and-Drop

Visual feedback is critically important for Drag-and-Drop. The dragged object should change: shrink (iOS: scale 0.8–0.9), become semi-transparent (alpha 0.7–0.8), and rise above the interface with a shadow (shadow offset). The drop target should visually react to hover: highlight, expand, or show a border. Without these signals, the user cannot tell where they can drop the object.

Return animation (drag cancel) — if the user releases the element outside the drop zone or over an invalid zone, the object should animate back to its original position. iOS UIDragInteractionDelegate provides dragInteraction(_:sessionDidMove:) for tracking and dragInteraction(_:session:willEndWith:) for return animation. Android View.setOnDragListener receives ACTION_DRAG_ENDED, where you can start a return animation via ValueAnimator or ObjectAnimator.

Accessibility: users with motor impairments may not be able to perform the drag gesture. Provide alternatives through “Move Up/Down” buttons for lists and a “Move to Folder” context menu for files. iOS VoiceOver supports the rotor action “Drag” for moving elements. Android TalkBack provides custom actions through AccessibilityNodeInfo.addAction(). Nike Run Club and Apple Health use DnD for reordering metrics on the dashboard — with access via standard buttons.