Nowadays, many background lists use drag and drop sorting function to facilitate the convenience of the list.
Without further ado, I found some demos online. After comparison, I now listed a convenient and practical demo based on
First, add the html code, it's very simple:
Copy the code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jqueryUIdrag</title>
</head>
<script src="js/jquery-1.11."></script>
<script src="js/"></script>
<style>
tr{cursor: pointer;}
</style>
<body>
<table >
<thead>
<tr>
<th class="index">Serial number</th>
<th>years</th>
<th>title</th>
<th>author</th>
</tr>
</thead>
<tbody>
<tr>
<td class="index">1</td>
<td>2014</td>
<td>This is the first1indivual</td>
<td>Astiff Astiff</td>
</tr>
<tr>
<td class="index">2</td>
<td>2015</td>
<td>This is the first2indivual</td>
<td>Assad launching point</td>
</tr>
<tr>
<td class="index">3</td>
<td>2016</td>
<td>This is the first3indivual</td>
<td>Assad sending place</td>
</tr>
<tr>
<td class="index">4</td>
<td>2017</td>
<td>This is the first4indivual</td>
<td>The arguments contest points</td>
</tr>
</tbody>
</table>
</body>
</html>
Copy the code
In addition to introducing and, the following code is also needed:
Copy the code
$(document).ready(function(){
var fixHelperModified = function(e, tr) {
var $originals = ();
var $helper = ();
$().each(function(index) {
$(this).width($(index).width())
});
return $helper;
},
updateIndex = function(e, ui) {
$('', ()).each(function (i) {
$(this).html(i + 1);
});
};
$("#sort tbody").sortable({
helper: fixHelperModified,
stop: updateIndex
}).disableSelection();
});
This is a more practical drag sort that I found, which is quite convenient.