JQuery Draggable Sortable Table Rows Example
If you need to drag and drop table rows in your project then you can do it easily using jquery ui. jquery ui provide sortable(), it helps to make sortable table each row and also we can perform ajax code etc in sortable function. We can generally use when we require to change order for our product table or etc.
In this example you can learn how to drag and drop of your ravle tr using sortable() of jquery ui. I also use bootstrap that way layout become pretty. So you can see bellow example:
Example:
<html lang="en">
<head>
<title>Jquery - bootstrap Prompt modal using bootbox.js</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.css" rel="stylesheet">
</head>
<body>
<div class="container text-center">
<h2>Jquery - Sortable table rows example</h2>
<table class="table table-bordered pagin-table">
<thead>
<tr>
<th width="50px">No</th>
<th>Name</th>
<th width="220px">Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Hardik Savani</td>
<td><a href="" class="btn btn-danger">Delete</a></td>
</tr>
<tr>
<td>2</td>
<td>Rajesh Savani</td>
<td><a href="" class="btn btn-danger">Delete</a></td>
</tr>
<tr>
<td>3</td>
<td>Haresh Patel</td>
<td><a href="" class="btn btn-danger">Delete</a></td>
</tr>
<tr>
<td>4</td>
<td>Vimal Patel</td>
<td><a href="" class="btn btn-danger">Delete</a></td>
</tr>
<tr>
<td>5</td>
<td>Harshad Pathak</td>
<td><a href="" class="btn btn-danger">Delete</a></td>
</tr>
</tbody>
</table>
</div>
<script type="text/javascript">
$('tbody').sortable();
</script>
</body>
</html>
I hope it can help you...
