Use drag and drop for moving an object from a source to a destination, position, group, or order. Use touch gesture for broad gesture rules, long press for sustained-contact invocation, drag-and-drop upload for OS file drops, kanban board for workflow columns, and sort controls for rule-based ordering.
Use drag and drop for moving an object from a source to a destination, position, group, or order. Use touch gesture for broad gesture rules, long press for sustained-contact invocation, drag-and-drop upload for OS file drops, kanban board for workflow columns, and sort controls for rule-based ordering.
Practice the judgment: Imagine this situation: A card can be moved only by pointer drag, excluding keyboard and assistive technology users. Write the person's goal, choose one of these patterns, and show the state that helps the person continue. Use the decision rules and source trail below to explain your choice.
Review the underlying principle →| Dimension | Drag and drop | Touch gesture | Long press | Drag-and-drop upload | Kanban board | Sort controls |
|---|---|---|---|---|---|---|
| UI or UX | UI + UX - Pointer or touch movement that picks up an object and drops it onto a valid destination | UI + UX - Touch-first gesture vocabulary and fallback contract for taps, swipes, drags, pinches, and multi-touch interactions | UI + UX - Sustained pointer contact that reveals secondary actions, selection, preview, or drag pickup | UI + UX - Drop-zone file upload enhancement with file input fallback | UI + UX - Workflow-state board for cards moving through columns | UI + UX - Control for changing the order of an existing result set |
| UI guidance | Render drag and drop with a visible draggable object, pickup affordance, drag preview, valid and invalid drop targets, insertion or placement feedback, cancellation, and a non-drag equivalent move path. | Render touch gesture affordances with visible targets, enough spacing, state feedback, and non-gesture controls for the same outcome when a gesture is path-based, multipoint, hidden, or easy to misfire. | Show long press as a sustained-contact gesture with a discoverable hint, press progress, hold threshold, cancellation, release behavior, and a visible non-gesture equivalent. | Render a large labelled drop zone with clear copy that says users can drag files there or activate a normal file picker, plus visible format, size, and count requirements. | Render workflow columns with visible names, status mapping, card counts, WIP limits, overloaded states, empty columns, and cards that show title, owner, priority, age, due date, blocked state, and enough metadata to understand the work. | Place the active sort control above or inside the result region it affects, with a visible label such as Sort by and an option name that includes both the attribute and direction. |
| UX guidance | Use drag and drop when direct object movement between destinations is faster and more understandable than choosing source and destination from separate controls. | Use touch gesture when the product needs direct manipulation on a touchscreen, but treat gestures as part of a larger interaction contract rather than the only way to act. | Use long press when a touch-first surface needs a secondary action that benefits from deliberate dwell time and can coexist with tap, scroll, swipe, and drag. | Use drag-and-drop upload as an enhancement for users who can drag files from a file manager, while preserving an equivalent click, keyboard, and mobile path. | Use Kanban board when teams pull work through a shared workflow and need to see WIP pressure, bottlenecks, blocked items, stale cards, and status changes at a glance. | Use sort controls when users need to rearrange the same matching results by a meaningful attribute while preserving the current search query, filters, page size, and view context. |
| Good UI | A task card has a visible drag handle, lifts on pickup, highlights valid columns, previews the insertion position, blocks Done with a WIP warning, and offers a Move to column menu. | A photo viewer supports pinch to zoom, double tap to zoom, plus and minus buttons, a reset button, zoom percent feedback, and a clear pan boundary after zoom. | A file tile shows a short Touch and hold for actions hint, displays a hold ring after press down, opens a context menu at the tile after threshold, and keeps a visible More actions button. | A drop zone says Drag bank statements here or choose files, shows PDF/PNG/JPG up to 10 MB, highlights when files hover over it, lists two dropped filenames, and keeps a Choose files button visible. | A product board shows Backlog, Ready, In progress, Review, and Done columns with card counts, WIP limits, blocked badges, owners, due dates, and visible over-limit styling in Review. | A search results page shows Sort by with options like Relevance, Due date (oldest first), and Amount (highest first) above the results. |
| Bad UI | A card can only be moved by mouse drag. | A hidden edge swipe deletes a message while the user is trying to scroll the list. | A long press starts drag pickup while users are trying to scroll the list. | The whole page becomes a hidden drop target that opens the dropped file in the browser when users miss the box. | WIP overload is hidden or only color-coded. | A menu labelled Sort contains Status: Open, Last 30 days, and Owner, which are filters rather than ordering rules. |
| Good UX | A user picks up a card, drags it over Review, sees the insertion line and WIP count, drops it, then receives Moved to Review with Undo. | A user starts swiping a gallery card, sees the next-card preview, changes their mind by moving back under the threshold, and the card snaps back with position unchanged. | A user touches and holds a photo, sees the hold progress cross threshold, receives haptic feedback, then a context menu opens with Copy, Share, Favorite, and Delete. | A user drags two PDFs over the zone, sees the target activate, drops them, reviews both filenames, removes the wrong one, uploads the remaining file, and then continues. | A developer moves a card from In progress to Review, sees the status update, receives an over-limit warning, and can undo or help clear the bottleneck instead of pulling more work. | A user searches for case, changes Sort by from Relevance to Due date (oldest first), and the same filtered records reorder while the query and filters remain. |
| Bad UX | A user starts scrolling a board and accidentally drags a card into Done. | A user tries to scroll a feed but the product interprets a short diagonal movement as a destructive swipe action. | A user taps a card slowly and accidentally opens a hidden destructive menu. | A user drags a file over the page, misses the small target, and the browser navigates to the file, wiping unsaved answers. | A user drags a card to Done but the underlying status remains In progress, so reports and automations disagree with the board. | Changing sort clears the search box and removes active filters. |
| Best fit | Users need spatial or ordered movement between clear sources and destinations. | A touchscreen interaction needs deliberate design for gesture vocabulary, thresholds, feedback, target sizing, cancellation, and equivalent controls. | A touch-first interface needs an optional shortcut to secondary item actions, selection mode, preview, or drag pickup. | Users often upload files from a desktop file manager and benefit from dropping one or more files into a visible target. | Work progresses through visible stages and the team uses the board to decide what to pull next. | Users need to compare or act on a result set in different orders. |
| Avoid when | The action is rare, destructive, high-impact, or hard to preview before release. | The gesture is only an implementation detail inside a more specific pattern such as swipe action, pull to refresh, long press, drag and drop, bottom sheet, carousel, or map view. | The action is primary, required, urgent, destructive, security-sensitive, consent-related, payment-related, or account-changing. | A normal file input is sufficient and the extra drop-zone states would add confusion. | Users primarily compare records by fields or edit cell-like data. | Users need to narrow which records are shown rather than change their order. |
| Required state | Idle state with draggable object identity and visible drag handle or move affordance. | Touch down or gesture start state that identifies the active target. | Idle target state with visible identity and alternate action path. | Idle drop zone with visible label, requirements, and choose-file fallback. | Default board state with columns, card counts, WIP limits, visible filters, selected board, and at least one card per active workflow stage. | Default sort state that identifies the initial order and why it is appropriate. |
| Accessibility burden | Provide keyboard, screen reader, switch, and visible-control paths for moving objects to every valid destination. | Provide a simple single-pointer alternative for multipoint or path-based gestures unless the gesture is essential. | Provide visible controls, action menus, custom screen reader actions, keyboard shortcuts, context-menu invocation, or selection checkboxes for the same outcomes. | Keep a visible label and instructions that name both drag-and-drop and choose-file paths. | Expose board name, active filters, sorting, grouping, column count, column names, card counts, and WIP limits as text. | Use a native select, radio group, or correctly implemented menu button for standalone sort controls. |
| Common misuse | Making drag the only way to move, reorder, assign, or change status. | Making a hidden gesture the only way to find navigation, delete, refresh, zoom, or edit controls. | Hiding required or primary actions behind undiscoverable long press. | Replacing the normal file chooser with a drop zone that only pointer users can operate. | Using Kanban columns as decorative categories rather than workflow states. | Putting filtering criteria such as date ranges, status, category, or owner inside a sort menu. |