154 lines
6.1 KiB
HTML
154 lines
6.1 KiB
HTML
<!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 & 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>
|