Drag and Drop – 8 Free CSS, Bootstrap & Tailwind Sets
Drag and Drop is a pack of eight sets of drag and drop interfaces, designed and maintained in-house by uiCookies. Every set comes in three versions that look the same: plain HTML and CSS, Bootstrap 5 using its .card, .list-group, .btn, .badge, .progress and grid where they fit, and Tailwind CSS 4. The sets cover sortable task lists, kanban boards with counts and totals, photo and dashboard grids, dragging people and stories into targets with limits, nested outlines and priority rankings, a gallery of handles, placeholders and drop states, a dark set, and a no-library set built on the native HTML Drag and Drop API. Each set carries its own short vanilla JavaScript, with no library and no build step.
A good drag and drop interface never depends on dragging. Every item needs a keyboard route: a real button that picks it up, arrow keys that move it, a key that drops it and Escape that puts it back, with each step announced to screen readers, such as Write brief moved to Done, position 2 of 4. Touch needs pointer events and a handle with touch-action: none, because native drag events barely work on phones. While an item moves, the list should show where it will land with a placeholder the size of the item, targets should look ready as soon as a drag starts, and a full target should refuse clearly instead of swallowing the item.
