jquery-ui sortable详解
该插件的用途:使用鼠标重新排列列表或网格中的元素。 helper 这个小伙子 总结的不错
Note: In order to sort table rows, the tbody must be made sortable, not the table .//毕竟tbody是父级嘛
2、axis
If defined, the items can be dragged only horizontally or vertically. Possible values: "x" , "y" .
3、cancel
$( "#s_item2" ).sortable({
cancel : ".cancel_me"
});
移除sortable对某些元素的影响。拖不行
![](https://img2022.cnblogs.com/blog/1022803/202211/1022803-20221102090427610-2055346556.png)
4、classes (最新版支持) 改变原有的一些风格,这个ui-sortable是它自己生成的
![](https://img2022.cnblogs.com/blog/1022803/202211/1022803-20221102090439322-911187731.png)
5、connectWith 相互之间可以拖动了
$(function(){ $( "#s_item,#s_item2" ).sortable({ connectWith : ".connect" }); }) </ script > </ head > < body > < ul id = "s_item" class = "connect" > < li >Item 1</ li > < li >Item 2</ li > < li >Item 3</ li > < li >Item 4</ li > < li >Item 5</ li > </ ul > < ul id = "s_item2" class = "connect" > < li >Item 6</ li > < li >Item 7</ li > < li >Item 8</ li > < li >Item 9</ li > < li >Item 0</ li > </ ul > </ body >
6、containment //规定只能在一定的范围内拖动
![](https://img2022.cnblogs.com/blog/1022803/202211/1022803-20221102090510013-1825017453.png)
7、cursor //拖动过程中鼠标展示类型 (move,defualt,pointer等等)
8、cursorAt //拖动过程中鼠标在该元素的哪个位置
下面是left:0时候的样子
![](https://img2022.cnblogs.com/blog/1022803/202211/1022803-20221102090545552-458092160.png)
9、delay //顾名思义,响应拖放的时候会有延迟
10、disabled //disabled值为true 当然就失效了
![](https://img2022.cnblogs.com/blog/1022803/202211/1022803-20221102090614190-991754913.png)
11、distance //拖动要达到一定距离才开始算起
![](https://img2022.cnblogs.com/blog/1022803/202211/1022803-20221102090621456-2127534478.png)
12、dropOnEmpty //如果值为false,那么就没法往空的格子里面拖放东西
![](https://img2022.cnblogs.com/blog/1022803/202211/1022803-20221102090631424-1382471750.png)
13、forceHelperSize //这个没清楚怎么个意思
![](https://img2022.cnblogs.com/blog/1022803/202211/1022803-20221102090645701-1404875302.png)
14、forcePlaceholderSize //这个也不清楚
![](https://img2022.cnblogs.com/blog/1022803/202211/1022803-20221102090653645-2035875737.png)
15、grid //写了之后,将容器弄成了一个一个的小格子,一格一格的走(其实我感觉是限定了xy方向的最小步长)
![](https://img2022.cnblogs.com/blog/1022803/202211/1022803-20221102090702709-1723801956.png)
16、handle //目的是限制拖拽区域,只有这个区域可以用来拖拽
![](https://img2022.cnblogs.com/blog/1022803/202211/1022803-20221102090710252-932261959.png)
17、helper //在拖拽元素的时候,调用一个函数(那个clone还是没弄懂草!)
< script type = "text/javascript" > function damn (){ alert( "fuckyou" ); } </ script > < script language = "javascript" type = "text/javascript" > $ ( function (){ $( "#s_item,#s_item2" ).sortable({ connectWith : ".connect" , cursor : "move" , disabled : false , dropOnEmpty : true , forceHelperSize : true , handle : ".handleboy" , helper : damn }); }) </ script >
18、items //告诉你 下面哪种元素要排序用
![](https://img2022.cnblogs.com/blog/1022803/202211/1022803-20221102090828228-1327961445.png)