master_template/public/sample-sort.html

154 lines
6.1 KiB
HTML
Raw Permalink Normal View History

2024-06-10 12:21:58 +00:00
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sortable Table Example</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.0/css/bootstrap.min.css">
<style>
.draggable-row {
cursor: move;
}
</style>
</head>
<body>
<div class="container">
<h1>Sortable Table Example</h1>
<table class="table table-striped" id="tbl_articles">
<thead>
<tr>
<th>Sn.</th>
<th>parent_article</th>
<th>title</th>
<th>alias</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr data-id="1" class="draggable-row">
<td>1</td>
<td>0</td>
<td>asdasd</td>
<td></td>
<td>
<div class="dropdown d-inline-block">
<button class="btn btn-soft-secondary btn-sm dropdown" type="button" data-bs-toggle="dropdown" aria-expanded="false">
<i class="ri-more-fill align-middle"></i>
</button>
<ul class="dropdown-menu dropdown-menu-end">
<li><a href="#" class="dropdown-item"><i class="ri-eye-fill align-bottom me-2 text-muted"></i> View</a></li>
<li><a href="#" class="dropdown-item edit-item-btn"><i class="ri-pencil-fill align-bottom me-2 text-muted"></i> Edit</a></li>
<li><a class="dropdown-item remove-item-btn" data-route="#"><i class="ri-delete-bin-fill align-bottom me-2 text-muted"></i> Delete</a></li>
</ul>
</div>
</td>
</tr>
<tr data-id="2" class="draggable-row">
<td>2</td>
<td>0</td>
<td>asdasd</td>
<td></td>
<td>
<div class="dropdown d-inline-block">
<button class="btn btn-soft-secondary btn-sm dropdown" type="button" data-bs-toggle="dropdown" aria-expanded="false">
<i class="ri-more-fill align-middle"></i>
</button>
<ul class="dropdown-menu dropdown-menu-end">
<li><a href="#" class="dropdown-item"><i class="ri-eye-fill align-bottom me-2 text-muted"></i> View</a></li>
<li><a href="#" class="dropdown-item edit-item-btn"><i class="ri-pencil-fill align-bottom me-2 text-muted"></i> Edit</a></li>
<li><a class="dropdown-item remove-item-btn" data-route="#"><i class="ri-delete-bin-fill align-bottom me-2 text-muted"></i> Delete</a></li>
</ul>
</div>
</td>
</tr>
<tr data-id="3" class="draggable-row">
<td>3</td>
<td>0</td>
<td>WELCOME TO JUPITER OVERSEAS CONCERN P.LTD.</td>
<td>welcome_to_hcrr</td>
<td>
<div class="dropdown d-inline-block">
<button class="btn btn-soft-secondary btn-sm dropdown" type="button" data-bs-toggle="dropdown" aria-expanded="false">
<i class="ri-more-fill align-middle"></i>
</button>
<ul class="dropdown-menu dropdown-menu-end">
<li><a href="#" class="dropdown-item"><i class="ri-eye-fill align-bottom me-2 text-muted"></i> View</a></li>
<li><a href="#" class="dropdown-item edit-item-btn"><i class="ri-pencil-fill align-bottom me-2 text-muted"></i> Edit</a></li>
<li><a class="dropdown-item remove-item-btn" data-route="#"><i class="ri-delete-bin-fill align-bottom me-2 text-muted"></i> Delete</a></li>
</ul>
</div>
</td>
</tr>
<tr data-id="4" class="draggable-row">
<td>4</td>
<td>0</td>
<td>Our Opportunities &amp; Strengths</td>
<td>our_objectives</td>
<td>
<div class="dropdown d-inline-block">
<button class="btn btn-soft-secondary btn-sm dropdown" type="button" data-bs-toggle="dropdown" aria-expanded="false">
<i class="ri-more-fill align-middle"></i>
</button>
<ul class="dropdown-menu dropdown-menu-end">
<li><a href="#" class="dropdown-item"><i class="ri-eye-fill align-bottom me-2 text-muted"></i> View</a></li>
<li><a href="#" class="dropdown-item edit-item-btn"><i class="ri-pencil-fill align-bottom me-2 text-muted"></i> Edit</a></li>
<li><a class="dropdown-item remove-item-btn" data-route="#"><i class="ri-delete-bin-fill align-bottom me-2 text-muted"></i> Delete</a></li>
</ul>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<script>
document.addEventListener("DOMContentLoaded", function() {
var table = document.getElementById("tbl_articles").getElementsByTagName("tbody")[0];
var rows = Array.from(table.getElementsByTagName("tr"));
var dragStartIndex;
var dragEndIndex;
rows.forEach(function(row) {
row.draggable = true;
row.addEventListener("dragstart", function(event) {
dragStartIndex = rows.indexOf(row);
event.dataTransfer.effectAllowed = "move";
event.dataTransfer.setData("text/html", event.target.innerHTML);
});
row.addEventListener("dragover", function(event) {
event.preventDefault();
event.dataTransfer.dropEffect = "move";
return false;
});
row.addEventListener("dragenter", function(event) {
event.target.classList.add("dragover");
});
row.addEventListener("dragleave", function(event) {
event.target.classList.remove("dragover");
});
row.addEventListener("drop", function(event) {
event.preventDefault();
dragEndIndex = rows.indexOf(event.target);
if (dragStartIndex !== dragEndIndex) {
event.target.classList.remove("dragover");
if (dragStartIndex < dragEndIndex) {
table.insertBefore(row, rows[dragEndIndex + 1]);
} else {
table.insertBefore(row, rows[dragEndIndex]);
}
}
});
});
});
</script>
</body>
</html>