Draggable Kanban Board App With jQuery And Bootstrap

A user-friendly, drag and drop kanban board app to manage your work on the web. Written in JavaScript (jQuery), Bootstrap 4 framework, and Material Design UI components.

Features:

• Add/Remove work items (kanban blocks).
• Gmail style starred work items.
• Allows you to move work items between statges with drag and drop.
• Dark & Light modes.
• Uses local storage to save and restore work items.

See It In Action:

How to use it:

1. Load the necessary resources in the document.

<!-- Material Icons -->
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<!-- Bootstrap Stylesheet -->
<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<!-- jQuery Library -->
<script src="/path/to/cdn/jquery.min.js"></script>
<!-- Bootstrap JavaScript -->
<script src="/path/to/cdn/bootstrap.min.js"></script>
<!-- Material Design UI components -->
<script src="https://unpkg.com/[email protected]/dist/material-components-web.min.js"></script>

2. Create a container to hold the kanban boards (stages & blocks).

<div class="boards overflow-auto p-0" id="boardsContainer">
</div>

3. Create add, remove, and dark mode toggle controls.

<div class="controls p-3">
  <form class="form-inline">
    <label for="titleInput">Title:</label>
    <input class="form-control form-control-sm" type="text" name="title" id="titleInput">
    <label for="descriptionInput">Description:</label>
    <input class="form-control form-control-sm" type="text" name="description" id="descriptionInput">
    <button class="btn btn-dark" id="add">Add</button>
    <button class="btn btn-danger mx-2" id="deleteAll">Delete All</button>
    <button class="btn" id="theme-btn">
      Dark/Light
    </button>
  </form>
</div>

4. Create the HTML for the loading screen.

<div id="loadingScreen">
  <div class="loader"></div>
</div>

5. Load the kanban board app's JavaScript and Stylesheet in the document. That's it.

<link rel="stylesheet" href="style.css" />
<script src="script.js" defer></script>

See Also:

• Draggable kanban Board Plugin With jQuery And jQuery UI

 

---

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