Draggable Kanban-style Card

Build a dynamic, Trello-style task board with this fully functional, drag-and-drop Kanban card component.

This template is designed to represent a single task or item in a project management workflow. It is powered by the popular SortableJS library to provide a seamless drag-and-drop experience between columns.

Get Source Code Preview

About this Component

This template provides the fundamental elements for a functional Kanban board, including columns and draggable cards. The drag-and-drop interaction is robust, providing clear visual feedback like a "ghost" placeholder for where the card will land, and a "dragging" style for the card itself. It's an excellent starting point for any task management application.

Features

• Fully Functional Drag-and-Drop: Powered by the lightweight SortableJS library, cards can be smoothly dragged between any column.
• Visual Feedback: The card being dragged gets a "lifted" style, and a placeholder appears in the list to show the user where the card will be dropped.
• Task-Oriented Design: Includes UI elements common to project management, like colored tags (e.g., "Bug," "Feature") and overlapping user avatars.

Code Breakdown

HTML Structure

The layout starts with a flex container (.kanban-board-container) that holds multiple column divs. Inside each column, the container for the draggable items (.kanban-tasks) is where the JavaScript library will be initialized. Each individual card is a semantic article.

CSS Styling

The card styles provide the base look and feel. Importantly, there are styles for classes that SortableJS adds dynamically. The .sortable-ghost class styles the placeholder that appears when you drag a card over a list. The .is-dragging class, which our custom JavaScript adds, provides the "lifted and rotated" look for the card that is currently being moved.

JavaScript Logic

This component relies on the external SortableJS library, which is included via a script tag pointing to a CDN. Our custom script is very simple:

1. It selects all the task list containers on the page (.kanban-tasks).
2. It loops through each one and initializes a new Sortable instance on it.
3. The group: 'kanban' part gives all lists the same group name, which tells SortableJS that cards can be moved freely between them.
4. The onStart and onEnd callback functions are used to add and remove a custom .is-dragging class, allowing us to style the card while it's in motion.

Code

Here's the complete, functional code. You can easily customize it by adding more columns or changing the content of the cards. To persist the state changes (i.e., save the new column and position of a card), you would add logic inside the onEnd callback to send an update to your server.