jQuery UI sortable，实现拖动排序
Query UI的强大不用多说，今天来看下它的拖动排序功能，jQuery UI使用sortable()实现对元素拖动排序，首先来看下面这个简单的例子：
<!DOCTYPE html>
<html>
<head>
<title>jQuery UI sortable()实现拖动排序</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="http://tool.phpddt.com/resources/js/jquery-1.7.2.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
</head>
<body>
<script>
$(function() {
$( ".sortable" ).sortable({
cursor: "move",
items :"li", //只是li可以拖动
opacity: 0.6, //拖动时，透明度为0.6
revert: true, //释放时，增加动画
update : function(event, ui){ //更新排序之后
alert($(this).sortable("toArray"));
}
});
});
</script>
<ul class="sortable">
<li class="ui-state-default" >第1项</li>
<li class="ui-state-default" >第2项</li>
<li class="ui-state-default" >第3项</li>
</ul>
</body>
</html>
jQuery UI sortable参数：| 参数 | 默认值 | 作用 |
| axis | false | 如果有设置，则元素仅能横向或纵向拖动。可选值：’x', ‘y’ |
| cancel | input,textarea,
button,select,option | 阻止排序动作在匹配的元素上发生 |
| connectWith | false | 允许sortable对象连接另一个sortable对象，可将item元素拖拽到另一个中.(类型：Selector) |
| containment | false | 约束排序动作只能在一个指定的范围内发生。可选值：DOM对象, ‘parent’, ‘document’, ‘window’, 或jQuery对象 |
| cursor | auto | 定义在开始排序动作时，鼠标的样式。
如 cursor: “move” |
| cursorAt | false | 当开始移动时，元素的偏移的位置（最多两个方向）。可选值：{ top, left, right, bottom }。
如 cursorAt: {left:5,bottom:5} |
| delay | 0 | 以毫秒为单位，设置延迟多久才激活排序动作。此参数可防止误点击。
如 delay: 500 |
| distance | 1 | 决定至少要在元素上面拖动多少像素后，才正式触发排序动作。
如 distance: 30 |
| dropOnEmpty | false | 是否允許拖拽到一個空的sortable对象中。 |
| grid | false | 每次移动都按一个格子大小移动，数组值：[x,y]
如 grid: [50, 20] |
| handle | false | 限制排序的动作只能在item元素中的某种元素
如 handle: ‘h2′ |
| helper | original | 设置是否在拖拽元素时，显示一个辅助的元素。可选值：‘original’, ‘clone’。
如 helper: ‘clone’ |
| items | “> *” (第一级子元素) | 指定在排序对象中，哪些元素是可以进行拖拽排序的。
如 items: “> li” |
| opacity | false | 辅助元素(helper)显示的透明度
如 opacity: 0.6 |
| placeholder | false | 设置当排序动作发生时，空白占位符的CSS样式
如 placeholder: ‘css-class-name’ （指定一个css的class） |
| revert | false | 如果设置成true，则被拖拽的元素在返回新位置时，会有一个动画效果 |
| scroll | false | 如果设置成true，则元素被拖动到页面边缘时，会自动滚动。 |
| scrollSensitivity | 20 | 设置当元素移动至边缘多少像素时，便开始滚动页面 |
| scrollSpeed | 20 | 设置页面滚动的速度 |
| tolerance | intersect | 设置当拖动元素越过其它元素多少时便对元素进行重新排序。可选值：’intersect’, ‘pointer’
intersect：至少重叠50% pointer：鼠标指针重叠元素 |
| zIndex | 1000 | 设置在排序动作发生时，元素的z-index值 |
jQuery UI sortable事件：
start
当排序动作开始时触发此事件。
定义：$(‘.selector’).sortable({ start: function(event, ui) { … } });
绑定：$(‘.selector’).bind(‘sortstart’, function(event, ui) { … });
sort
当元素发生排序时触发此事件。
定义：$(‘.selector’).sortable({ sort: function(event, ui) { … } });
绑定：$(‘.selector’).bind(‘sort’, function(event, ui) { … });
change
当元素发生排序且坐标已发生改变时触发此事件。
定义：$(‘.selector’).sortable({ change: function(event, ui) { … } });
绑定：$(‘.selector’).bind(‘sortchange’, function(event, ui) { … });
beforeStop
当排序动作结束之前触发此事件。此时占位符元素和辅助元素仍有效。
定义：$(‘.selector’).sortable({ beforeStop: function(event, ui) { … } });
绑定：$(‘.selector’).bind(‘sortbeforeStop’, function(event, ui) { … });
stop
当排序动作结束时触发此事件。
定义：$(‘.selector’).sortable({ stop: function(event, ui) { … } });
绑定：$(‘.selector’).bind(‘sortstop’, function(event, ui) { … });
update
当排序动作结束时且元素坐标已经发生改变时触发此事件。
定义：$(‘.selector’).sortable({ update: function(event, ui) { … } });
绑定：$(‘.selector’).bind(‘sortupdate’, function(event, ui) { … });
receive
当一个已连接的sortable对象接收到另一个sortable对象的元素后触发此事件。
定义：$(‘.selector’).sortable({ receive: function(event, ui) { … } });
绑定：$(‘.selector’).bind(‘sortreceive’, function(event, ui) { … });
over
当一个元素拖拽移入另一个sortable对象后触发此事件。
定义：$(‘.selector’).sortable({ over: function(event, ui) { … } });
绑定：$(‘.selector’).bind(‘sortover’, function(event, ui) { … });
out
当一个元素拖拽移出sortable对象移出并进入另一个sortable对象后触发此事件。
定义：$(‘.selector’).sortable({ out: function(event, ui) { … } });
绑定：$(‘.selector’).bind(‘sortout’, function(event, ui) { … });
activate
当一个有使用连接的sortable对象开始排序动作时，所有允许的sortable触发此事件。
定义：$(‘.selector’).sortable({ activate: function(event, ui) { … } });
绑定：$(‘.selector’).bind(‘sortactivate’, function(event, ui) { … });
deactivate
当一个有使用连接的sortable对象结束排序动作时，所有允许的sortable触发此事件。
定义：$(‘.selector’).sortable({ deactivate: function(event, ui) { … } });
绑定：$(‘.selector’).bind(‘sortdeactivate’, function(event, ui) { … });
jQuery UI sortable方法：
destory
从元素中移除拖拽功能。
用法：.sortable( ‘destroy’ )
disable
禁用元素的拖拽功能。
用法：.sortable( ‘disable’ )
enable
启用元素的拖拽功能。
用法：.sortable( ‘enable’ )
option
获取或设置元素的参数。
用法：.sortable( ‘option’ , optionName , [value] )
serialize
获取或设置序列化后的每个item元素的id属性。
用法：.sortable( ‘serialize’ , [options] )
toArray
获取序列化后的每个item元素的id属性的数组。
用法：.sortable( ‘toArray’ ）
refresh
手动重新刷新当前sortable对象的item元素的排序。
用法：.sortable( ‘refresh’ )
refreshPositions
手动重新刷新当前sortable对象的item元素的坐标，此方法可能会降低性能。
用法：.sortable( ‘refreshPositions’ )
cancel
取消当前sortable对象中item元素的排序改变。
用法：.sortable( ‘cancel’ )
转载请注明来源：jQuery UI sortable()实现拖动排序 http://www.php1.cn/Content/jQueryUIsortable--_ShiXianTuoDongPaiXu.html