├── index.html ├── script.js └── style.css /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Kanban 8 | 9 | 10 | 11 | 12 |
13 |
14 |
Card 01
15 |
Card 02
16 |
17 |
18 |
Card 03
19 |
Card 04
20 |
21 |
22 |
Card 05
23 |
Card 06
24 |
25 |
26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | const columns = document.querySelectorAll(".column"); 2 | 3 | document.addEventListener("dragstart", (e) => { 4 | e.target.classList.add("dragging"); 5 | }); 6 | 7 | document.addEventListener("dragend", (e) => { 8 | e.target.classList.remove("dragging"); 9 | }); 10 | 11 | columns.forEach((item) => { 12 | item.addEventListener("dragover", (e) => { 13 | const dragging = document.querySelector(".dragging"); 14 | const applyAfter = getNewPosition(item, e.clientY); 15 | 16 | if (applyAfter) { 17 | applyAfter.insertAdjacentElement("afterend", dragging); 18 | } else { 19 | item.prepend(dragging); 20 | } 21 | }); 22 | }); 23 | 24 | function getNewPosition(column, posY) { 25 | const cards = column.querySelectorAll(".item:not(.dragging)"); 26 | let result; 27 | 28 | for (let refer_card of cards) { 29 | const box = refer_card.getBoundingClientRect(); 30 | const boxCenterY = box.y + box.height / 2; 31 | 32 | if (posY >= boxCenterY) result = refer_card; 33 | } 34 | 35 | return result; 36 | } 37 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | font-family: 'poppins'; 6 | font-size: 30px; 7 | } 8 | 9 | .kanban { 10 | display: flex; 11 | justify-content: center; 12 | min-height: 400px; 13 | gap: 10px; 14 | padding: 10px; 15 | } 16 | 17 | .column { 18 | display: flex; 19 | flex-direction: column; 20 | gap: 10px; 21 | padding: 10px; 22 | background-color: cadetblue; 23 | min-width: 200px; 24 | border-radius: 5px; 25 | } 26 | 27 | .item { 28 | background-color: white; 29 | padding: 10px; 30 | border-radius: 5px; 31 | } 32 | 33 | .dragging { 34 | opacity: 0.5; 35 | } --------------------------------------------------------------------------------