$(document).ready(function(){
$(".sortable").sortable({ //排序组件初始化
appendTo: $(".distination"), //不知道作用
//axis : "y", //定义移动方向 x:水平 y:竖直
cursor: "move", //拖拽时鼠标样式
items: ".sort_item", //定义可拖拽的元素
cancel: "a,button", //匹配的元素阻止排序事件
classes: {"ui-sortable": "highlight"}, //设置排序元素样式
connectWith: ".distination", //多个排序元素间互相拖拽排序
//containment : "#content1", //排序容器,拖拽不能超出容器范围
//cursorAt : { right: 5 }, //拖拽时,元素始终跟随鼠标的位置 { top, left, right, bottom }
//delay : 2000, //排序拖拽之后延迟时间
//distance: 35, //鼠标移动多少距离之后开始排序事件
dropOnEmpty: true, //结合connectWith属性, 是否可以拖拽到空的排序元素中
//forceHelperSize : false, //强制帮助元素有一个大小 未测试
//forcePlaceholderSize: true, //未测试
//grid: [ 20, 100 ], //每次移动的坐标
//handle: ".handle", //元素句柄,类似于windows系统中的窗口头部
helper: "clone", //帮助元素的显示方式 , "original" "clone" 默认original
opacity : "0.6", //设置帮助元素透明度
placeholder: "sortable-placeholder", //设置占位符样式
revert : 1000, //设置动画时间 true,false,number
scroll : true, //拖动到滚动条底部的时候是否向下滚动 默认true
scrollSensitivity: 60, //scroll为true时,鼠标距离滚动条顶部或底部多少像素是触发滚动事件
scrollSpeed : 20, //滚动条滚动速度, scroll为true时生效
tolerance :"pointer", //指定鼠标超过元素多少时重新排序, intersect:超过百分之五十 pointer:鼠标移入另一个个元素时 默认:intersect
zIndex: 999, //设置辅助元素的堆叠顺序 未测试
activate: function(event, ui){
$("#eventBox").text("排序事件被激活");
},
beforeStop: function( event, ui ){
//$("#eventBox").text("排序事件完成前");
},
change: function( event, ui ){
//$("#eventBox").text("排序改变事件");
},
create: function( event, ui ){
//$("#eventBox").text("排序组件被创建");
},
deactivate: function( event, ui ){
//$("#eventBox").text("排序事件完成后");
},
out:function( event, ui ){
//$("#eventBox").text("排序组件被移出");
},
over:function( event, ui ){
//$("#eventBox").text("移到另一个排序组件上方");
},
remove:function(event, ui){
$("#eventBox").text("移出组件");
},
sort: function (event, ui){
$("#eventBox").text("正在排序");
}
//start stop update
});
$(".distination").sortable({
connectWith: ".sortable",
receive:function(event, ui){
//$("#eventBox").text("接收组件");
}
});
$(".sort_item").click(function(){
//alert(1);
});
});
完整例子下载地址:jquery-sortable完整例子