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对某些元素的影响。拖不行

 

 

4、classes  （最新版支持） 改变原有的一些风格，这个ui-sortable是它自己生成的

 

 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 //规定只能在一定的范围内拖动

 

 7、cursor //拖动过程中鼠标展示类型 (move,defualt,pointer等等)

 

 

8、cursorAt  //拖动过程中鼠标在该元素的哪个位置

  下面是left:0时候的样子

 

 

 

 9、delay   //顾名思义，响应拖放的时候会有延迟

 

 

10、disabled  //disabled值为true  当然就失效了

 

 

 

11、distance //拖动要达到一定距离才开始算起

 

 

 

12、dropOnEmpty //如果值为false，那么就没法往空的格子里面拖放东西

 

 

 

 

 

13、forceHelperSize  //这个没清楚怎么个意思

 

 

 

14、forcePlaceholderSize //这个也不清楚

 

 

 

15、grid  //写了之后，将容器弄成了一个一个的小格子，一格一格的走（其实我感觉是限定了xy方向的最小步长）

 

 

 

16、handle   //目的是限制拖拽区域，只有这个区域可以用来拖拽

 

 

 

 

 

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  //告诉你 下面哪种元素要排序用