Drag & Drop Snippets — Free HTML CSS JS Sortable & Draggable UI Examples

Dragging is direct manipulation: the user moves the thing itself rather than describing the move to a form. These snippets cover both mechanisms — the native HTML5 drag events for file drops and cross-container moves, and pointer-event dragging for the smooth, cancellable reordering that lists and boards need.

Each one handles the details that separate a real implementation from a demo: a placeholder showing where the item will land, auto-scroll near the edges, a cancel path on Escape, and a keyboard-accessible alternative for people who cannot drag at all.

Two different APIs for two different jobs

The HTML5 drag-and-drop API (draggable, dragstart, dragover, drop) is the only mechanism that receives files dragged in from the desktop or elements dragged between browser windows — nothing else can see those events. Pointer events, by contrast, give full control over the dragged element's visual position on every move, which is what in-page sortable lists and kanban boards actually need. Reaching for the wrong one is the most common cause of a drag feature that half-works.

The placeholder is what makes reordering legible

Without a visible gap showing where an item will land, a drag operation is guesswork until the user releases. Every sortable snippet here computes the insertion point continuously as the pointer moves — usually by comparing the pointer position against the midpoints of sibling elements — and shows a placeholder there, so the drop location is obvious before the drop happens.

Auto-scroll near the edges

A list or board longer than the viewport needs to scroll while an item is being dragged toward its edge, or reordering is limited to whatever is currently visible. These snippets detect the pointer entering a margin near the container's top or bottom and scroll the container at a speed proportional to how close the pointer is to the edge, stopping the moment the pointer moves back toward the centre.

Escape, and the keyboard path that is not optional

A cancel-on-Escape handler that returns the dragged item to its original position covers the case where a user changes their mind mid-drag. The more important requirement is a fully separate keyboard path — focus the item, then move it with an arrow-key or button-based control, announcing the new position through an aria-live region — because drag-only reordering is entirely unusable without a mouse, which makes it one of the more common accessibility failures in board and list UIs.