# Kanban Board > A kanban board with drag and drop: cards lift and tilt as you drag between columns, other cards Flip aside and column counts roll. Canonical: https://gsapvault.com/ui-elements/kanban-drag-board Live demo: https://gsapvault.com/demos/kanban-drag-board/index.html | Property | Value | |----------|-------| | Type | ui-element | | Tier | paid | | Price | £5 | | Difficulty | advanced | | Plugins | Flip | | Techniques | flip-layout, drag, keyboard-reorder, touch-drag, velocity-reactive, micro-interaction | | Uses Lenis | No | ## Lighthouse, as measured Google Lighthouse on the demo, 15 September 2026. A measurement of the demo as shipped, not a promise for your page. | Category | Score | |----------|-------| | Accessibility | 100 | | Best practices | 100 | No performance score is published: it depends on the deployment (server compression, caching, CDN, connection and device) rather than on the code, so measure it where it will live. ## Overview A kanban board where the space a card will land in is always visible. Pick up a card and it lifts: a small scale, a longer shadow, a 1px accent ring and a tilt that leans with the pointer's horizontal speed and settles back as the pointer slows. A slot the height of the card opens under it, in its own column or any other, and every card in the way Flips aside to make room. Let go and the card settles into the slot on a short damped ease. The column counts roll up and down as the slot crosses between columns, a card dropped into Done has its title struck through with a quick draw, and dragging a card out of Done takes the line away again. An emptied column shows a drop zone that takes a card like any other. The keyboard can do everything the pointer can. Focus a card, press Space to pick it up, move it with the arrow keys within a column and across columns, then Space to drop or Escape to put it back where it started. Each step is announced through a live region: "Moved 'Audit the onboarding email sequence' to In progress, position 2 of 4." On a phone a long press of about 200ms picks a card up, so an ordinary swipe still scrolls the page; the columns become a horizontal snap scroller, one column per view, and holding a card near the edge pages to the next column. Every committed move dispatches a bubbling kanban:move event with the card id, the source and target columns and the new index, so saving the board is one listener. One HTML file, one stylesheet, one script: vanilla JavaScript with GSAP and the Flip plugin, no framework. Light and dark themes come from one set of custom properties switched by a data-variant attribute. ## Features - Cards drag across and within columns, lifted with a scale, a shadow and a 1px accent ring - A tilt driven by the pointer's horizontal velocity, damped twice so it leans and recovers rather than wobbles - A slot the height of the card opens where it will land, and every other card Flips aside, across columns too - A settle on drop from wherever the card is drawn into the slot, with no transform left on any card - Column counts that roll up or down as they change, including while the slot is crossing columns - Dropping into the done column draws a strike through the title; dragging out removes it - An empty column shows a drop zone that accepts a card - Full keyboard moves: Space picks up, arrows move within and across columns, Space drops, Escape cancels to the origin - A polite live region announcing every pick-up, move, drop and cancel by column and position - Touch-aware: a 200ms long press picks up, so swipes still scroll; a snap scroller of one column per view on a phone, with edge paging while dragging - A bubbling kanban:move event carrying id, from, to and index - Light and dark themes on one set of custom properties ## Use Cases - Task and issue boards in a project management or internal tool - Sales pipelines and hiring funnels where each card is a deal or a candidate - Content calendars and editorial workflows moving pieces from draft to published - Support queues and triage boards in an admin console - Onboarding checklists a customer moves through by stage ## Vibe-Code Ready Setup This UI element includes `START-HERE-AI.md`, a product-specific copy-paste setup prompt for Cursor, Claude Code, ChatGPT, GitHub Copilot, Windsurf, and other coding assistants. It tells the assistant to inspect the existing stack, integrate the supplied files, preserve the design, scope selectors, retain accessibility and responsive behaviour, add framework-appropriate GSAP cleanup, and report what it tested. [How AI-assisted setup works](https://gsapvault.com/vibe-coding) ## How It Works ### Picking up, and the slot that follows When a press becomes a drag (4px of net travel with a mouse, a 200ms hold with a finger) the card's place in its list is taken by a slot of the same height, and the card itself is lifted out, fixed to the viewport where it was, so it can travel over every column and past the edge of a scrolling container. On every move the component works out which column is under the pointer and how many resting cards sit above the card's middle; resting positions come from offsetTop, so the transforms of cards still in flight never make the answer flicker. ### Flip for everything that makes room Moving the slot is one DOM insertion wrapped in Flip.getState and Flip.from, so every card that has to make room, in the same column and in the column the slot just left, glides from its old position to its new one. Interrupting a Flip mid-flight with another move is safe: the next state is captured from where the cards are drawn, not where they were headed. ### The tilt, the settle and the strike A ticker smooths the pointer's horizontal speed and then eases the rotation toward it, so a quick flick leans the card a few degrees and a pause brings it upright. On release the card goes back into the list where the slot was and is tweened from its drawn position, rotation and scale back to rest. The done strike is a background line on the inline title, so it follows every line of a wrapped title, drawn by tweening one custom property from 0% to 100%. ### Keyboard, touch and reduced motion Keyboard moves use the same Flip, with focus kept on the card through each DOM move and a blur the component did not cause dropping the card rather than stranding it. On touch the drag only starts after a still long press, and from then the touchmove is cancelled so the page stays put. Under reduced motion every move happens instantly with no tilt, which keeps the board fully usable. ## Documentation How this UI element works and how it goes into a page. The reference you use once you own the files (worked examples, events, the programmatic API, the class list) ships with the download. ### What's Included - `index.html`: the demo page and the markup to copy - `assets/style.css`: component styles, plain CSS custom properties for colours - `assets/script.js`: readable, commented source with an `onReady` guard - Cards drag across and within columns, lifted with a small scale, a longer shadow and a 1px accent ring - A tilt driven by the pointer's horizontal velocity, smoothed and then eased, so a flick leans the card a few degrees and a pause brings it upright - A slot the height of the card opens where it will land, and every card in the way glides aside with GSAP Flip, in the same column and across columns - A settle on drop from wherever the card is drawn into the slot, after which no card carries a leftover transform - Column counts that roll up or down when they change, including while the slot crosses between columns - A strike drawn through the title when a card lands in the done column, removed again when it leaves - An empty-state drop zone in any column that has no cards - A full keyboard model with a polite live region, and a long press on touch so ordinary swipes still scroll - A bubbling `kanban:move` event carrying the card id, the two columns and the new index - Roles used: `
` columns labelled by their `

`, `