jQuery UI Sortable 插件使选中的元素伴随鼠标拖动实现排序.
所有的回调函数接受两个参数: 浏览器事件和ui对象, 此对象请查看下面的文档 :
$("#sortable").sortable();
<!DOCTYPE html>
<html>
<head>
<link type="text/css" href="themes/base/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="ui/ui.core.js"></script>
<script type="text/javascript" src="ui/ui.sortable.js"></script>
<style type="text/css">
#sortable { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#sortable li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; height: 1.5em; }
html>body #sortable li { height: 1.5em; line-height: 1.2em; }
.ui-state-highlight { height: 1.5em; line-height: 1.2em; }
</style>
<script type="text/javascript">
$(document).ready(function(){
$("#sortable").sortable({
placeholder: 'ui-state-highlight'
});
$("#sortable").disableSelection();
});
</script>
</head>
<body style="font-size:62.5%;">
<ul id="sortable">
<li class="ui-state-default">Item 1</li>
<li class="ui-state-default">Item 2</li>
<li class="ui-state-default">Item 3</li>
<li class="ui-state-default">Item 4</li>
<li class="ui-state-default">Item 5</li>
<li class="ui-state-default">Item 6</li>
<li class="ui-state-default">Item 7</li>
</ul>
</body>
</html>
这个事件在排序开始时触发.
start事件进行操作.
$('.selector').sortable({
start: function(event, ui) { ... }
});sortstart类型来绑定start事件.
$('.selector').bind('sortstart', function(event, ui) {
...
});这个事件在排序时触发.
sort事件进行操作.
$('.selector').sortable({
sort: function(event, ui) { ... }
});sort类型来绑定sort事件.
$('.selector').bind('sort', function(event, ui) {
...
});这个事件在排序时触发,但是仅仅在对象在DOM中的位置改变时才会触发.
change事件进行操作.
$('.selector').sortable({
change: function(event, ui) { ... }
});sortchange类型来绑定change事件.
$('.selector').bind('sortchange', function(event, ui) {
...
});这个事件在排序停止时触犯,但仅仅在placeholder/helper依然存在时触发.
beforeStop事件进行操作.
$('.selector').sortable({
beforeStop: function(event, ui) { ... }
});sortbeforeStop类型来绑定beforeStop事件.
$('.selector').bind('sortbeforeStop', function(event, ui) {
...
});这个事件在排序停止时触发.
stop事件进行操作.
$('.selector').sortable({
stop: function(event, ui) { ... }
});sortstop类型来绑定stop事件.
$('.selector').bind('sortstop', function(event, ui) {
...
});这个事件在用户停止排序并且DOM节点位置发生改变时出发.
update事件进行操作.
$('.selector').sortable({
update: function(event, ui) { ... }
});sortupdate类型来绑定update事件.
$('.selector').bind('sortupdate', function(event, ui) {
...
});这个时间在一个已连接的sortable接收到来自另一个列表的元素时触发.
receive事件进行操作.
$('.selector').sortable({
receive: function(event, ui) { ... }
});sortreceive类型来绑定receive事件.
$('.selector').bind('sortreceive', function(event, ui) {
...
});这个事件在sortable中的元素移除自身列表添加到另一个列表时触发.
remove事件进行操作.
$('.selector').sortable({
remove: function(event, ui) { ... }
});sortremove类型来绑定remove事件.
$('.selector').bind('sortremove', function(event, ui) {
...
});这个事件在一个元素添加到连接列表中时触发.
over事件进行操作.
$('.selector').sortable({
over: function(event, ui) { ... }
});sortover类型来绑定over事件.
$('.selector').bind('sortover', function(event, ui) {
...
});这个事件在一个元素移除连接列表时触发.
out事件进行操作.
$('.selector').sortable({
out: function(event, ui) { ... }
});sortout类型来绑定out事件.
$('.selector').bind('sortout', function(event, ui) {
...
});这个事件发生在使用连接列表,每个连接列表在拖动开始准备接受它时触发.
activate事件进行操作.
$('.selector').sortable({
activate: function(event, ui) { ... }
});sortactivate类型来绑定activate事件.
$('.selector').bind('sortactivate', function(event, ui) {
...
});这个事件发生在排序结束后,传播到所有可能的连接列表.
deactivate事件进行操作.
$('.selector').sortable({
deactivate: function(event, ui) { ... }
});sortdeactivate类型来绑定deactivate事件.
$('.selector').bind('sortdeactivate', function(event, ui) {
...
});完全移除排序功能. 这将使元素返回到之前的初始化状态.
关闭排序功能.
打开排序功能.
获取或者设置sortable参数. 如果没有提供参数值则是获取.
序列化一个sortable成为一个form/ajax提交字符串. 调用此方法生产的序列,可以附加到任何URL ,以轻松提交一个新的项目,以便回传到服务器.
它的工作原理是默认情况下使用每个项目排序ID使用' setname_number '进行格式化,它吐出了类似"setname[]=number&setname[]=number"这样的散列.
您也可以给一个选择散列作为第二个参数,以确定如何实现自定义的功能.允许的选择是:'key' （取代part1[]无论你是否想这样）, 'attribute' （测试另一个属性'id' ）和 'expression'(使用您自己的regexp).
如果序列返回一个空字符串,请确保编号属性包括下划线. 他们必须符合以下格式: "set_number"例如, 一个有3个元素的列表使用id和attributes foo_1, foo_5, foo_2 会被序列化为 foo[]=1&foo[]=5&foo[]=2. 你可以使用下划线, 等号或者连字符去分隔set和number. 例如 foo=1 或者 foo-1 或者 foo_1 都序列化为 foo[]=1.
使sortable的项目序列化一个字符串数组. 如果你有一个
<ul id="a_sortable"><br> <li id="hello">Hello</li><br> <li id="goodbye">Good bye</li><br> </ul>
并且执行
var result = $('#a_sortable').sortable('toArray');
那么
result[0] 则包含 "hello" ,result[1] 则包含 "goodbye".
刷新sortable项目. 自定义触发所有sortable项目的重新加载, 以使新项目得到承认.
刷新缓存中的sortable项目的位置. 调用此方法将刷新所有缓存中sortable项目的位置. 这通常是脚本自动完成的并且会降低性能. 请慎重使用.
取消当前sortable中的一个变更并且将该元素恢复到它上一次所在的位置.在结束和接收回调中很有用.
如果排序元素不是从连接列表中的一个移动到另一个:
$(this).sortable('cancel');
便可取消变更.
如果排序元素是从连接列表中的一个移动到另一个:
$(ui.sender).sortable('cancel');
便可取消变更. 在'receive'回调中很有用.
jQuery UI Sortable插件使用jQuery UI CSS 框架的外观和风格，包括颜色和背景纹理.我们建议您使用ThemeRoller工具来创建和下载的自定义主题，很容易建立和维护.
如果有更深层次的个性化需要，有特定类别的工具ui.sortable.css样式可供参考，可以修改这些参考。这些课程是下面以高亮和粗体显示的。
Note: 注：这是一个示例sortable插件所产生的标记,而不是你应该使用的标记.创建一个sortable唯一需要的标记是
<ul>
<li></li>
<li></li>
<li></li>
</ul>.