A web-based, Kanban-style, project management tool feat. Drag and Drop API, localStorage 😎
Explore the docs »
View Demo
·
Report Bug
·
Request Feature
Table of Contents
"Kanban" is the Japanese word for "visual signal". If you work in services or technology, your work is often times invisible and intangible. A kanban board is an agile project management tool designed to help visualize work, limit work-in-progress, and maximize efficiency (or flow). It can help both agile and DevOps teams establish order in their daily work. Kanban boards use cards, columns, and continuous improvement to help technology and service teams commit to the right amount of work, and get it done!
Kanban has come a long way from its origins in lean manufacturing thanks to a small but mighty group of kanban enthusiasts. David Anderson’s work defining the kanban method helped bring kanban into the software and services space, and Personal Kanban, by Jim Benson and Tonianne DeMaria, helped expand the applications of kanban to places you wouldn’t believe. 🔥
This is an example of how you may start on setting up your project locally. To get a local copy up and running follow these simple example steps.
This is an example of how to list things you need to use the software and how to install them.
- Live Server Extension
- First of all install
Live Serverextension byRitwick Dey. - Once the extension was installed, then
right-clickonindex.htmland selectOpen with Live Server. - It'll open a new tab in browser & start serving the Kanban Board. Enjoy!.
- First of all, we need to gather all
functional requirementsof the Kanban Board. kanban boards can be broken down into five components:Visual signals,columns,work-in-progresslimits, acommitment point, and adelivery point.
More About Each Component
-
Visual Signals — One of the first things you’ll notice about a kanban board are the visual cards (stickies, tickets, or otherwise). Kanban teams write all of their projects and work items onto cards, usually one per card. For agile teams, each card could encapsulate one user story. Once on the board, these visual signals help teammates and stakeholders quickly understand what the team is working on.
-
Columns — Another hallmark of the kanban board are the columns. Each column represents a specific activity that together compose a “workflow”. Cards flow through the workflow until completion. Workflows can be as simple as “Backlog,” “In Progress,” “Complete,” or "On Hold".
-
Work In Progress (WIP) Limits — WIP limits are the maximum number of cards that can be in one column at any given time. A column with a WIP limit of three cannot have more than three cards in it. When the column is “maxed-out” the team needs to swarm on those cards and move them forward before new cards can move into that stage of the workflow. These WIP limits are critical for exposing bottlenecks in the workflow and maximizing flow. WIP limits give you an early warning sign that you committed to too much work.
-
Commitment point — Kanban teams often have a backlog for their board. This is where customers and teammates put ideas for projects that the team can pick up when they are ready. The commitment point is the moment when an idea is picked up by the team and work starts on the projec
-
Delivery point — The delivery point is the end of a kanban team’s workflow. For most teams, the delivery point is when the product or service is in the hands of the customer. The team’s goal is to take cards from the commitment point to the delivery point as fast as possible. The elapsed time between the two is the called Lead Time. Kanban teams are continuously improving to decrease their lead time as much as possible.
- Then break the whole board into small
Ui Components& start building indivisual components.
Ui Components:
-
Columns, Custom Scrollbar
- an unordered list is going to hold these 4 columns & each column is going to contain another unordered list which'll hold all the task items.
- In each column, there'll be a header at top that indicates the type of the column, followed by task items and then at last, two buttons - add-item, save-item and a textbar which'll be hidden by default.
- Each task item can have a maximum height of 52% of viewport height, so that user can always sees the bottom of the column.
- If a column contains any task item with very long text, then in that case, a custom-designed scollbar will appear at side to scroll through the task items and at same item user can see whole column.
-
Connection between DOM & localStorage
- First of all, we set 4 global arrays that'll hold all the contents for each 4 columns.
- On load of the page, it'll try to fetch data from localStorage if there's any and populate them into those arrays accordingly. Otherwise set some default contents for those 4 arrays.
- There's another global var to keep track if there's any changes made on those global 4 arrays.
- Then a function to update DOM. It'll create element for each item in those 4 arrays and insert them into their proper columns accordingly.
-
Drag-&-Drop Feature
- First of all: To make an element draggable, set the `draggable` attribute to true
- Then, specify what should happen when the element is dragged. The `ondragstart` attribute calls a function, drag(event), that specifies what data to be dragged. The element is saved into a global var to keep track which element is being dragged and making it global as we need it in drop function as well later on.
- The ondragover event specifies where the dragged data can be dropped. By default, data/elements cannot be dropped in other elements. To allow a drop, we must prevent the default handling of the element. This is done by calling the event.preventDefault() method for the ondragover event.
- Do the Drop - ondrop: When the dragged data is dropped, a drop event occurs. Call preventDefault() to prevent the browser default handling of the data (default is open as link on drop).
- Add these methods on the element by `ondragover`, `ondrop` attributes.
- It'll be nice to have some visual reference to show that the column is ready to accept the incoming item. So the parent column and drop-target column take the colour of their head as their content's background color.
- On the fire of `dragenter` event, the parent column and drop-target column changes color & update their content.
- Finally, each time when an item moved to another column, all the global arrays that contains column data are rebuilt and updated localStrorage.
-
Add, Update, Delete an Item
- On the click on `Add Item` button, an inputBox will appear and `add Item` button get vanished by `Save Item` button.
- Once an user entered his message and press `Save Item`, the message is pushed into localArrays, transferred into localStorage and DOM get updated!.
- At the time of creating item in the column, we also added contentEditable = true. So that later on, when user click on an item, he is able to edit/delete it.
- Now when an user click into an item, modified it and then leves the element, then `focusout` event get fired. The focusout event fires when an element is about to lose focus. On the fire of this event, the item is checked for if it does has text or not. If not, then remove it from the corresponding localArray & update the DOM. If it has text, then the current string in the corresponding localArray overwritten by new one & update the DOM.
- But in the above process, drag-drop functionlity get broken Because when an user click on an item, it's opening to be edited, meaning that the item's text content is in flux. As a result, when user drag it, because the text content is in flux and not saved, it does't have ability to copy it over to another column because it doesn't know what's its own value is.
- In order to fix this, we need to make sure that an item can be updated only if it is not being dragged. So we create a global variable to keep track whether an item is being dragged or not. At start of drag function, we set it to `true` and at the end of drop function set it back to false.
For more information, visit necessary reference Link
- Flexibility: Digital Kanban boards allow teams that do not share a physical office space to use kanban boards remotely and asynchronously. The setup involves just a few clicks to create digital lists, which represent the stages of your kanban process, on a board view that your whole team can access and manage.
- Drag and Drop: Once can move a task from one stage to another stage by just dragging and dropping the card.
- Local Storage: The setup uses browser's Local Storage to store the digital for faster data fetching. Even if the browser or tab get closed, all the data remain safe!. So that on the next page load, the board gets back to its previous state.
See the open issues for a full list of proposed features (and known issues).
Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.
If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature) - Commit your Changes (
git commit -m 'Add some AmazingFeature') - Push to the Branch (
git push origin feature/AmazingFeature) - Open a Pull Request
Distributed under the MIT License. See LICENSE.txt for more information.
Prasenjit Sutradhar - @twitter_handle - prasenjitsutradhar3433@gmail.com
Project Link: https://github.com/Prasenjit-3433/Drag-and-Drop