Drag and Drop

Use drag and drop for tasks that require manipulating a large set of items in any order, such as re-ordering a list of items or building a set of conditions.

Drag and drop has some significant drawbacks, such as requiring fine motor skills to drag the item and drop it in the correct spot, and the drop zone being off screen when there's a long list of items. So try other interaction patterns before deciding to use drag and drop.

Audience builder drag and drop UI.

Best Practices

Drag and drop items should provide signifiers that you can drag it, and indicate where you can drop it. While dragging the item, clearly indicate where the valid drop zones are. When the user drags an item over the drop zone, visually indicate that they may drop the item there. Try to keep the draggable items and dropzones on screen at all times so the user doesn't need to scroll to drop the item in the right spot.

Drag and drop signifier. Drag and drop item signifier

Drag and drop hover drop zone. Drag and drop hover drop zone.

Axis Locking

If you are using drag and drop to reorder a list, you should lock the axis of the drag. If a user begins to drag an item and it is not locked to a particular axis, they may be under the impression they can drag the item to wherever they want.