Kanban

Use this drag and drop library to customize the KanBan board

Getting started

Before using the Kanban page you need to include the Sortable plugin by adding the following script file before the end of the body tag:

<script src="@@path/vendor/sortablejs/Sortable.min.js"></script>

Initializing the kanban board

In your html file you need to create a div tag with an id attribute:

<div id="kanbanColumn1" class="list-group kanban-list">
  <!-- Card items goes inside -->
</div>

After that in your Javascript files you’ll need to initialize the calendar like this:

var kanbanColumn1 = document.getElementById('kanbanColumn1');
if (kanbanColumn1) {
    new Sortable(kanbanColumn1, {
        group: "shared",
    });
}

If you want to learn all of the options that you can use for the Kanban plugin you can visit the Sortable.js documentations and see all the available options.