How to Create a Drag and Drop Table with CSS and JavaScript
In this Javascript Tutorial, we will see how to create an interactive table where users can rearrange content (both text and images) with a simple drag and drop.
Project Source Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Draggable Mixed Content Table</title>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&
display=swap" rel="stylesheet">
<style>
:root{
--primary-color:#4a90ea;
--secondary-color:#f5f7fa;
--text-color:#333;
--border-color:#eaeaea;
--hover-color:#ecf0f1;
--shadow-color:rgba(0,0,0,0.1);
--gradient-bg:linear-gradient(135deg, #6dd5ed 0%, #2193b0 100%);
}
*{ box-sizing: border-box; margin: 0; padding: 0; }
body{
font-family: 'Poppins', sans-serif;
background-color: var(--secondary-color);
color: var(--text-color); display: flex;
justify-content: center; align-items: center;
min-height: 100vh; padding: 20px;
}
.table-container{
background-color: #fff; border-radius: 20px;
box-shadow: 12px 12px 24px var(--shadow-color),
-12px -12px 24px rgba(255,255,255,0.6);
overflow: hidden; transition: all 0.3s ease;
max-width: 900px; width: 100%; padding: 20px;
}
.table-container:hover{
box-shadow: 15px 15px 30px rgba(0,0,0,0.15),
-15px -15px 30px rgba(255,255,255,0.75);
}
table{ border-collapse: separate; border-spacing: 0;
width: 100%; border-radius: 12px; overflow: hidden;
}
th, td{ padding: 16px 24px; text-align: center; transition: all 0.3s ease; }
th{ background: var(--gradient-bg); color: white;
font-weight: 600; text-transform: uppercase;
letter-spacing: 1px; font-size: 14px;
}
tbody tr:last-child td{ border-bottom: none; }
td:hover{ background-color: var(--hover-color); }
.dragging{ opacity: 0.7; transform: scale(0.98); }
.drag-over{ background-color: var(--hover-color) !important;
transform: scale(1.05);
}
.drag-ghost{background-color: var(--primary-color);
color: white; border-radius: 4px;
padding: 8px 12px; font-size: 14px; position: fixed;
pointer-events: none; z-index: 1000; opacity: 0.9;
box-shadow: 0 4px 10px var(--shadow-color);
}
img{ max-width: 100px; max-height: 100px; object-fit: cover;
border-radius: 8px; transition: all 0.3s ease;
}
img:hover{ transform: scale(1.1);
box-shadow: 0 4px 8px var(--shadow-color);
}
/* Highlight animation for dropped items */
.highlight{
animation: highlight 1s ease-in-out;
}
@keyframes highlight{
0%{ background: var(--primary-color); color:white; }
100%{ background: transparent; color:var(--text-color); }
}
</style>
</head>
<body>
<div class="table-container">
<table id="myTable">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
</thead>
<tbody>
<tr>
<td draggable="true"><img src="images/avatar7.png"
alt="image1" draggable="false"></td>
<td draggable="true">Text Cell 1</td>
<td draggable="true"><img src="images/avatar2.png"
alt="image2" draggable="false"></td>
</tr>
<tr>
<td draggable="true">Text Cell 2</td>
<td draggable="true"><img src="images/avatar3.png"
alt="image3" draggable="false"></td>
<td draggable="true">Text Cell 3</td>
</tr>
<tr>
<td draggable="true"><img src="images/avatar4.png"
alt="image4" draggable="false"></td>
<td draggable="true">Text Cell 4</td>
<td draggable="true"><img src="images/avatar5.png"
alt="image5" draggable="false"></td>
</tr>
</tbody>
</table>
</div>
<script>
const table = document.getElementById('myTable');
let draggedCell = null;
let dragGhost = null;
// Event listener for drag start
table.addEventListener('dragstart', (e) => {
if(e.target.tagName !== 'TD') return;
draggedCell = e.target;
e.target.classList.add('dragging');
// Create a ghost element for dragging
dragGhost = document.createElement('div');
dragGhost.className = 'drag-ghost';
// Check if the dragged cell contains an image or text
const img = draggedCell.querySelector('img');
if(img){
dragGhost.innerHTML = `<img src="${img.src}"
alt="${img.alt}" style="width:50px; object-fit:cover;">`;
}
else{ dragGhost.textContent = draggedCell.textContent; }
document.body.appendChild(dragGhost);
e.dataTransfer.setDragImage(dragGhost, 25, 25);
setTimeout(() => { e.target.style.opacity = '0.5';}
, 0 );
});
// Event listener for drag over
table.addEventListener('dragover', (e) => {
e.preventDefault();
if(dragGhost){
dragGhost.style.left = e.clientX + 15 + 'px';
dragGhost.style.top = e.clientY + 15 + 'px';
}
});
// Event listener for drag enter
table.addEventListener('dragenter', (e) => {
e.preventDefault();
if(e.target.tagName === 'TD'){
e.target.classList.add('drag-over');
}
});
// Event listener for drag leave
table.addEventListener('dragleave', (e) => {
e.preventDefault();
if(e.target.tagName === 'TD'){
e.target.classList.remove('drag-over');
}
});
// Event listener for drop
table.addEventListener('drop', (e) => {
e.preventDefault();
if(e.target.tagName === 'TD'){
// Swap the contents of the cells
const temp = e.target.innerHTML;
e.target.innerHTML = draggedCell.innerHTML;
draggedCell.innerHTML = temp;
// Remove drag-over class and add highlight effect
e.target.classList.remove('drag-over');
e.target.classList.add('highlight');
draggedCell.classList.add('highlight');
// Remove highlight class after animation
setTimeout(() => { e.target.classList.remove('highlight');
draggedCell.classList.remove('highlight');
}, 1000);
}
});
// Event listener for drag end
table.addEventListener('dragend', (e) => {
e.target.classList.remove('dragging');
e.target.style.opacity = '1';
table.querySelectorAll('td').forEach(cell => {
cell.classList.remove('drag-over');
});
if(dragGhost){
document.body.removeChild(dragGhost);
dragGhost = null;
}
});
</script>
</body>
</html>
OUTPUT:
