<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Drag & Drop Table Rows</title>
<style>
table {
width: 100%;
border-collapse: collapse;
}
th, td {
padding: 10px;
border: 1px solid #ddd;
text-align: center;
}
tr.dragging {
background-color: #f0f0f0;
opacity: 0.6;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody id="table-body">
<tr draggable="true">
<td>1</td>
<td>Alice</td>
<td>25</td>
</tr>
<tr draggable="true">
<td>2</td>
<td>Bob</td>
<td>30</td>
</tr>
<tr draggable="true">
<td>3</td>
<td>Charlie</td>
<td>28</td>
</tr>
</tbody>
</table>
<script>
document.addEventListener("DOMContentLoaded", () => {
const tableBody = document.getElementById("table-body");
let draggedRow = null;
tableBody.addEventListener("dragstart", (event) => {
draggedRow = event.target;
draggedRow.classList.add("dragging");
});
tableBody.addEventListener("dragover", (event) => {
event.preventDefault();
const afterElement = getDragAfterElement(tableBody, event.clientY);
if (afterElement == null) {
tableBody.appendChild(draggedRow);
} else {
tableBody.insertBefore(draggedRow, afterElement);
}
});
tableBody.addEventListener("dragend", () => {
draggedRow.classList.remove("dragging");
});
function getDragAfterElement(container, y) {
const rows = [...container.querySelectorAll("tr:not(.dragging)")];
return rows.reduce((closest, child) => {
const box = child.getBoundingClientRect();
const offset = y - box.top - box.height / 2;
if (offset < 0 && offset > closest.offset) {
return { offset, element: child };
} else {
return closest;
}
}, { offset: Number.NEGATIVE_INFINITY }).element;
}
});
</script>
</body>
</html>
No comments:
Post a Comment