<div class="aaa">
<ul id="sortable">
<li id="test">Item 6</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 1</li>
<li>Item 5</li>
</ul>
</div>
$("#sortable").sortable()//直接用
（一）各个参数的介绍
axis: "y" 表示只允许x拖动 或是y拖动
cancel: "#test" 表示禁止某个元素 注意只是填写 .test或者是 #test 或者是标签
connectWith: "#sortable2" 这个暂时还不知道是什么用法
containment: "parent" 移动的窗口是否只是针对父级元素
cursor: "move" 表示移动的时候，鼠标的状态
cursorAt: { left: 20 } 表示光标出现在某个位置的时候可以移动
delay: 150 表示拖动的延迟时间
disabled: true
distance: 30 表示拖动30px的距离的时候, 才可以移动
forceHelperSize: false 这个暂时不知道是什么用法
grid: [ 200, 100 ] 表示拉动一下，元素移动的距离
opacity:0.5 //表示移动的时候的透明度
evert: true 表示移动回退的时候,是否加上渐变回退的效果
scroll :false,
option:"tolerance"
zIndex:100 //移动的时候增加的zIndex值
使用方法:
$("#sortable").sortable({
axis: "y",
cancel: "#test",
...
});
二，方法的介绍
$("#sortable").sortable("cancel"); //取消拖拽方法
$("#sortable").sortable("destroy"); //销毁拖拽方法
$("#sortable").sortable("disable"); //禁止拖拽方法
$("#sortable").sortable("enable"); //开启拖拽方法
三，事件的介绍
$("#sortable").sortable({
activate:function(function,ui){ //移动的时候执行的方法
},
beforeStop:function(){ //移动停止的时候执行的方法,此时排序可以发生变化或者不发生变化
$(this).addClass("abc");
},
change:function(){
$(this).addClass("vvv") //排序发生变化的时候执行的方法
},
create:function(){ //初始化的时候，执行的方法
$(this).addClass("vbv")
},
out:function(){ //当移东到父级元素外的时候,执行的方法
$(this).addClass("vbv")
},
over:function(){
$(this).addClass("vbv") //当在父级的范围内移动的时候，执行的方法
},
remove:function(){ //元素移动的时候执行的方法
},
sort:function(){ //在排序执行的过程中执行的方法
},
start:function(){ //开始移动的时候执行的方法
},
stop:function(){ //移动停止的时候执行的方法
},
update:function(){ //移动的时候并且排序发生变化的时候执行的方法
}
});