Kanban Board (SortableJS)
A multi-column kanban board where cards drag between columns with smooth animation, using SortableJS.
Requires SortableJS. Add the CDN tag below to your page (styles in
<head>, scripts before </body>). The downloaded file already includes it.<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.2/Sortable.min.js"></script><div class="kb">
<div class="kb-col"><h4>To do</h4><div class="kb-list" data-col><div class="kb-card">Design hero</div><div class="kb-card">Write copy</div><div class="kb-card">Pick colors</div></div></div>
<div class="kb-col"><h4>In progress</h4><div class="kb-list" data-col><div class="kb-card">Build navbar</div><div class="kb-card">API wiring</div></div></div>
<div class="kb-col"><h4>Done</h4><div class="kb-list" data-col><div class="kb-card">Setup repo</div></div></div>
</div>body{background:#f6f7fa}
.kb{display:flex;gap:14px;font-family:system-ui,sans-serif}
.kb-col{width:150px;background:#eef0f6;border-radius:14px;padding:12px}
.kb-col h4{margin:0 0 10px;font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:#7a8198}
.kb-list{min-height:40px;display:flex;flex-direction:column;gap:8px}
.kb-card{background:#fff;border-radius:9px;padding:11px 12px;font-size:13px;color:#1a1f36;box-shadow:0 2px 6px rgba(20,25,50,.08);cursor:grab}
.kb-card.sortable-ghost{opacity:.4}
.kb-card.sortable-chosen{box-shadow:0 8px 20px rgba(91,108,255,.3)}document.querySelectorAll('[data-col]').forEach(function(col){
new Sortable(col,{group:'kanban',animation:160,ghostClass:'sortable-ghost',chosenClass:'sortable-chosen'});
});Free to use.This component uses SortableJS (linked above). Copy any file, or download a ready-to-open .html page with the CDN links already included.