无意间看到的一个插件,引入jquery.min.js,jquery-sort.min.js文件,网盘地址:https://pan.baidu.com/s/1pSJ0PsVH1uT4mXbf2f0ETg
代码如下:
<!Doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jquery拖拽排序</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-sort.min.js"></script>
<style>
ul li{ cursor:pointer; height:40px; line-height:40px; list-style: none; }
.num{ width: 20px; height: 20px; text-align: center; }
</style>
</head>
<body>
<ul id="ul-sort">
<li>
<input type="text" name="num" class="num" value="1">内容11111111111111111111
</li>
<li>
<input type="text" name="num" class="num" value="2">内容22222222222222222222
</li>
<li>
<input type="text" name="num" class="num" value="3">内容33333333333333333333
</li>
<li>
<input type="text" name="num" class="num" value="4">内容44444444444444444444
</li>
</ul>
<script>
$(function(){
//更新序号
var updateSerial = function(){
$('.num').each(function(i){
$(this).val(i + 1);
});
};
$("#ul-sort").sortable({
stop: updateSerial
});
});
</script>
</body>
</html>