Draggable Kanban Board Plugin With jQuery And jQuery UI

This is a tiny jquery plugin for creating a draggable kanban board with 2 or more columns. This kanban board is similar to the project management software as it displays the tasks and their progress on a visual board.

Drag and drop Kanban board has become a very popular choice for modern web apps. If you want to improve your user engagement by allowing them to drag and drop cards from one column to another, you should give it a try.

See Also:

• Draggable Kanban Board App With jQuery And Bootstrap

How to use it:

1. Load the necessary jQuery and jQuery UI (for draggable functionality) libraries in the document.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/cdn/jquery-ui.min.js"></script>

2. Download and load the jQuery Kanban plugin's files.

<link rel="stylesheet" href="css/kanban.min.css" />
<script src="js/kanban.min.js"></script>

3. Create an empty container to hold the kanban board.

<div id="kanban"></div>

4. Override the default titles of the kanban columns.

const titles = ['Task' , 'Estimate' , 'Complete' , 'Invoiced' , 'Paid']

5. Define your tasks in an array of JS objects as follows:

const tasks = [
      {
        id: 1,
        title: 'Test 1',
        block: 'Task',
        link: '[URL]',
        link_text: 'TEST001',
        footer: 'Custom Footer HTML Content'
      },
      {
        id: 2,
        title: 'Test 2',
        block: 'Estimate',
        footer: 'Custom Footer HTML Content'
      },
      // ...
]

6. Initialize the plugin to generate a basic kanban board.

$('#kanban').kanban({
  titles: titles,
  items: tasks,
});

7. Override the default colors of the titles.

$('#kanban').kanban({
  titles: titles,
  items: tasks,
  colours: ['#00aaff','#ff921d','#00ff40','#ffe54b','#8454ff'],
});

8. Callback functions.

$('#kanban').kanban({
  titles: titles,
  items: tasks,
  onChange: function(e,ui){},
  onReceive: function(e,ui){},
});

---

This awesome jQuery plugin is developed by craig-davey96. For more Advanced Usages, please check the demo page or visit the official website.