使用jQuery创建拖拽排序列表
Category : JavaScript
项目中需要用到拖拽排序,于是去研究了jQuery的UI,发现它提供了一种非常简单的方式来实现可视化排序.
首先是html代码:
<ul id="test"> <li>first</li> <li>second</li> <li>third</li> </ul> <input id="test-button" type="button"> <input id="show" type="text">
然后在script中导入jQuery,ui.core和ui.sortable3个包
<script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="ui.core.js"></script> <script type="text/javascript" src="ui.sortable.js"></script>
最后,写对应的js脚本
$(document).ready(function(){
$('#test').sortable({
items:'li'
});
$('#test-button').click(function(){
$('#show').attr('value',$('#test').sortable('toArray'));
});
});
解释一下:
要排序的东西放在ul里,用sortable()来使列表可排序,items指出要排序的元素,使用sortable('toArray')来获得当前的排序结果.
