Dragula

Dragula will allow the user to drag an element in any of the containers and drop it in any other container in the list.

Requires JS.
assets/js/vendors/kanban.js
Note that this component requires the use of the third-party dragula plugin.
Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

 <div class="task-kanban-container pb-4">
                            <div class="task-card card border-0 me-3">
                            <div class="card-body">

                            <!-- card -->
                            <div id="do"
                              class="d-flex flex-column overflow-y-auto overflow-x-hidden
                                gap-3" style="height: 100vh">

                            <div class="card border-0 shadow-sm">
                            <div class="card-body">
                            <h5 class="">Card title</h5>
                            <p class="text-truncate">Some quick example text to build on the card
                            title and make up the bulk of the card's content.</p>
                            </div>
                            </div>

                            <!-- card -->

                            <!-- card -->
                            <div class="card border-0 shadow-sm">
                            <div class="card-body">
                            <h5 class="">Card title</h5>
                            <p class="text-truncate">Some quick example text to build on the card
                            title and make up the bulk of the card's content.</p>
                            </div>
                            </div>
                            </div>
                            </div>
                            </div>
                            <div class="task-card card border-0 mx-3">
                            <div class="card-body">

                            <!-- card -->
                            <div id="progress" class="d-flex flex-column overflow-y-auto overflow-x-hidden
                                gap-3" style="height: 100vh">
                            <div class="card border-0 shadow-sm">
                            <div class="card-body">
                            <h5 class="">Card title</h5>
                            <p class="text-truncate">Some quick example text to build on the card
                            title and make up the bulk of the card's content.</p>
                            </div>
                            </div>
                            <div class="card border-0 shadow-sm">
                            <div class="card-body">
                            <h5 class="">Card title</h5>
                            <p class="text-truncate">Some quick example text to build on the card
                            title and make up the bulk of the card's content.</p>
                            </div>
                            </div>
                            </div>
                            </div>
                            </div>
                            </div>
Buy Now