Draggable Kanban Style Card

<!DOCTYPE html>
<title>My Example</title>

<style>
/* This is an optional body style to provide a background for the page */
body {
    background-color: #f3f4f6;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
}

/* === Kanban Board Demo Layout === */
.kanban-board-container {
    display: flex;
    gap: 1rem;
    padding: 1.5rem;
    overflow-x: auto; /* Allows horizontal scrolling for columns */
    min-height: 100vh;
}
.kanban-column {
    flex: 0 0 300px; /* Each column has a fixed width */
    background-color: #e5e7eb;
    border-radius: 8px;
    padding: 0.75rem;
}
.kanban-column-title {
    font-size: 1rem;
    font-weight: 600;
    color: #4b5563;
    padding: 0 0.5rem 0.75rem;
    margin: 0 0 0.75rem;
    border-bottom: 2px solid #d1d5db;
}
.kanban-tasks {
    display: grid;
    gap: 1rem;
    min-height: 100px; /* Creates a drop zone area even when empty */
}

/* === Kanban Card Styles === */
.kanban-card {
    --kanban-radius: 8px;
    --kanban-shadow: 0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px -1px rgba(0,0,0,0.1);

background-color: #ffffff;
    border-radius: var(--kanban-radius);
    box-shadow: var(--kanban-shadow);
    padding: 1rem;
    border-left: 4px solid #4f46e5; /* Default accent color */
    cursor: grab;
    transition: box-shadow 0.2s, transform 0.2s;
}
.kanban-card:active {
    cursor: grabbing;
}
/* Style for the 'ghost' class added by SortableJS when dragging */
.kanban-card.sortable-ghost {
    background: #eef2ff;
    border: 2px dashed #4f46e5;
    box-shadow: none;
    color: transparent;
}
.kanban-card.sortable-ghost * {
    visibility: hidden;
}

/* Style for the card being actively dragged */
.kanban-card.is-dragging {
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1);
    transform: rotate(3deg);
}

.kanban-card-title {
    font-size: 1rem;
    font-weight: 500;
    color: #1f2937;
    margin: 0 0 1rem;
}

.kanban-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.kanban-tags { display: flex; gap: 0.5rem; }
.kanban-tag { font-size: 0.75rem; font-weight: 500; padding: 0.125rem 0.5rem; border-radius: 9999px; }

/* Tag Color Variations */
.tag-bug { background-color: #fef2f2; color: #b91c1c; }
.tag-feature { background-color: #eff6ff; color: #1e40af; }

.kanban-avatars { display: flex; }
.kanban-avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; border: 2px solid #ffffff; }
.kanban-avatar:not(:first-child) { margin-left: -8px; /* Overlap */ }

/* Card color variations */
.kanban-card.type-design { border-left-color: #db2777; }
.kanban-card.type-qa { border-left-color: #f59e0b; }

</style>

<div class="kanban-board-container">
    
    <div class="kanban-column">
        <h3 class="kanban-column-title">To Do</h3>
        <div class="kanban-tasks">
            <article class="kanban-card">
                <p class="kanban-card-title">Create new user authentication flow.</p>
                <footer class="kanban-card-footer"><div class="kanban-tags"><span class="kanban-tag tag-feature">Feature</span></div><div class="kanban-avatars"><img src="https://placehold.co/56x56/3b82f6/ffffff/png?text=AR" alt="Avatar of Alex Rivera" class="kanban-avatar"></div></footer>
            </article>
        </div>
    </div>

<div class="kanban-column">
        <h3 class="kanban-column-title">In Progress</h3>
        <div class="kanban-tasks">
             <article class="kanban-card type-design">
                <p class="kanban-card-title">Design the new settings page mockups.</p>
                <footer class="kanban-card-footer"><div class="kanban-tags"></div><div class="kanban-avatars"><img src="https://placehold.co/56x56/ec4899/ffffff/png?text=E" alt="Avatar of Elara Vance" class="kanban-avatar"></div></footer>
            </article>
            <article class="kanban-card">
                <p class="kanban-card-title">Develop the API endpoint for user data.</p>
                <footer class="kanban-card-footer"><div class="kanban-tags"><span class="kanban-tag tag-feature">Feature</span></div><div class="kanban-avatars"><img src="https://placehold.co/56x56/1d4ed8/ffffff/png?text=N" alt="Avatar of Nora Ives" class="kanban-avatar"></div></footer>
            </article>
        </div>
    </div>

<div class="kanban-column">
        <h3 class="kanban-column-title">Done</h3>
        <div class="kanban-tasks">
             <article class="kanban-card type-qa">
                <p class="kanban-card-title">Fix login button bug on mobile.</p>
                <footer class="kanban-card-footer"><div class="kanban-tags"><span class="kanban-tag tag-bug">Bug</span></div><div class="kanban-avatars"><img src="https://placehold.co/56x56/f59e0b/ffffff/png?text=F" alt="Avatar of Felix Quinn" class="kanban-avatar"><img src="https://placehold.co/56x56/6366f1/ffffff/png?text=AZ" alt="Avatar of Adelaide Vance" class="kanban-avatar"></div></footer>
            </article>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>

<script>
document.addEventListener('DOMContentLoaded', () => {
    const taskLists = document.querySelectorAll('.kanban-tasks');

taskLists.forEach(list => {
        new Sortable(list, {
            group: 'kanban', // Set the same group name on all lists
            animation: 150,
            ghostClass: 'sortable-ghost', // The class for the drop placeholder
            
            onStart: function (evt) {
                evt.item.classList.add('is-dragging'); // Add a class to the item being dragged
            },
            onEnd: function (evt) {
                evt.item.classList.remove('is-dragging'); // Remove the class when dragging ends
            }
        });
    });
});
</script>