JSFiddle - React, Tailwind, and code Playground
HTML
<div class="container">
<div class="column">
<h1>All Tasks</h1>
<div class="item" draggable="true">Wash Clothes</div>
<div class="item" draggable="true">Meeting at 9AM</div>
<div class="item" draggable="true">Fix workshop</div>
<div class="item" draggable="true">Visit the zoo</div>
</div>
<div class="column">
<h1>In progress</h1>
</div>
<div class="column">
<h1>Paused</h1>
</div>
<div class="column">
<h1>Under Review</h1>
</div>
<div class="column">
<h1>Completed</h1>
</div>
</div>
CSS
.container{
font-family: "Trebuchet MS", sans-serif;
display: flex;
gap: 30px;
}
.column{
flex-basis: 20%;
background: #ddd;
min-height: 90vh;
padding: 20px;
border-radius: 10px;
}
.column h1{
text-align: center;
font-size: 22px;
}
.item{
background: #fff;
margin: 20px;
padding: 20px;
border-radius: 3px;
cursor: pointer;
}
.invisible{
display: none;
}
JavaScript
const items = document.querySelectorAll('.item')
const columns = document.querySelectorAll('.column')
items.forEach(item => {
item.addEventListener('dragstart', dragStart)
item.addEventListener('dragend', dragEnd)
});
columns.forEach(column => {
column.addEventListener('dragover', dragOver);
column.addEventListener('dragenter', dragEnter);
column.addEventListener('dragleave', dragLeave);
column.addEventListener('drop', dragDrop);
});
var dragItem = null;
function dragStart() {
console.log('drag started');
dragItem = this;
setTimeout(() => this.className = 'invisible', 0)
}
function dragOver(e) {
e.preventDefault()
console.log('drag over');
}
function dragEnter() {
console.log('drag entered');
}
function dragLeave() {
console.log('drag left');
}
function dragEnd() {
console.log('drag ended');
this.className = 'item'
dragItem = null;
}
function dragDrop() {
console.log('drag dropped');
this.append(dragItem);
}