https://github.com/biohacker0/kanban-board

Simple Kanban board in plain javascript
https://github.com/biohacker0/kanban-board

Last synced: about 1 year ago
JSON representation

Simple Kanban board in plain javascript

• Host: GitHub
• URL: https://github.com/biohacker0/kanban-board
• Owner: biohacker0
• Created: 2024-02-23T09:06:50.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2024-02-24T11:18:02.000Z (over 2 years ago)
• Last Synced: 2025-04-02T01:42:00.088Z (over 1 year ago)
• Language: JavaScript
• Homepage: https://kanbanboard0.netlify.app/
• Size: 10.7 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# Drag and Drop JavaScript Project

- [Blog](https://corvus-ikshana.hashnode.dev/kanban-board-in-plain-javascript)

# Link -https://kanbanboard0.netlify.app/

This project provides a simple implementation of drag and drop functionality using JavaScript. It allows users to drag items from one area of the webpage and drop them into another, enhancing user interaction and usability.

## Features

- Draggable items: Users can drag elements with the class `task`.

- Droppable areas: These are defined by elements with the class `swim-lane`.

- Visual feedback: When an item is being dragged, it receives visual feedback by adding the class `is-dragging`.

- Dynamic positioning: When dropping an item, it is placed above the nearest item in the drop area.

![image](https://github.com/biohacker0/Kanban-Board/assets/50107470/cb64485a-b34d-4a02-95e8-9d83a7ddb248)

![image](https://github.com/biohacker0/Kanban-Board/assets/50107470/e3c22e29-2e7a-4a4c-a5fc-26f22082b9a9)

![image](https://github.com/biohacker0/Kanban-Board/assets/50107470/2407dcd1-1eed-4654-a02e-2645be8cb288)