Draggable Kanban Board App With jQuery And Bootstrap
File Size: | 29.5 KB |
---|---|
Views Total: | 17373 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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/material-components-web@latest/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:
This awesome jQuery plugin is developed by guiguat. For more Advanced Usages, please check the demo page or visit the official website.