jquery-ui sortable详解

该插件的用途:使用鼠标重新排列列表或网格中的元素。helper  这个小伙子总结的不错
Note: In order to sort table rows, the tbody must be made sortable, not the table.//毕竟tbody是父级嘛

1、appendTo
   说实话这个属性不是甚了解,大致是appendTo父级容器//拖拽的父级节点
jquery-ui sortable详解
jquery-ui sortable详解

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

4、classes  (最新版支持) 改变原有的一些风格,这个ui-sortable是它自己生成的
jquery-ui sortable详解
jquery-ui sortable详解

5、connectWith  相互之间可以拖动了
jquery-ui sortable详解
jquery-ui sortable详解

   $(function(){
        $("#s_item,#s_item2").sortable({
            connectWith:".connect"
       });
    })
</script>
</head>
<body>
    <ulid="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>
   
    <ulid="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 //规定只能在一定的范围内拖动
jquery-ui sortable详解
jquery-ui sortable详解


7、cursor //拖动过程中鼠标展示类型 (move,defualt,pointer等等)
jquery-ui sortable详解

jquery-ui sortable详解

8、cursorAt  //拖动过程中鼠标在该元素的哪个位置
  下面是left:0时候的样子
jquery-ui sortable详解
jquery-ui sortable详解
jquery-ui sortable详解
jquery-ui sortable详解

9、delay   //顾名思义,响应拖放的时候会有延迟
jquery-ui sortable详解
jquery-ui sortable详解

10、disabled  //disabled值为true  当然就失效了
jquery-ui sortable详解
jquery-ui sortable详解


11、distance //拖动要达到一定距离才开始算起
jquery-ui sortable详解
jquery-ui sortable详解

12、dropOnEmpty //如果值为false,那么就没法往空的格子里面拖放东西
jquery-ui sortable详解
jquery-ui sortable详解
jquery-ui sortable详解

jquery-ui sortable详解

13、forceHelperSize  //这个没清楚怎么个意思
jquery-ui sortable详解

jquery-ui sortable详解

14、forcePlaceholderSize //这个也不清楚
jquery-ui sortable详解

jquery-ui sortable详解

15、grid  //写了之后,将容器弄成了一个一个的小格子,一格一格的走(其实我感觉是限定了xy方向的最小步长)
  jquery-ui sortable详解
jquery-ui sortable详解

16、handle   //目的是限制拖拽区域,只有这个区域可以用来拖拽
jquery-ui sortable详解
jquery-ui sortable详解
jquery-ui sortable详解
jquery-ui sortable详解



17、helper //在拖拽元素的时候,调用一个函数(那个clone还是没弄懂草!)
<scripttype="text/javascript">
      functiondamn(){
            alert("fuckyou");
      }
   </script>
<scriptlanguage="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>

jquery-ui sortable详解
jquery-ui sortable详解

18、items  //告诉你 下面哪种元素要排序用
jquery-ui sortable详解
jquery-ui sortable详解


19、opacity   //控制拖拽时候的透明程度
jquery-ui sortable详解
jquery-ui sortable详解

20、placeholder  //就是你移入时候 排序元素在着陆点位置的样式(实际上会给目标着陆点添加指定类)
jquery-ui sortable详解

jquery-ui sortable详解
#s_itemli.holderCss{border:1pxdashed #fc0;background:#fff;}
</style>
<scriptlanguage="javascript"type="text/javascript">
   $(function(){
        $("#s_item").sortable({
            placeholder:"holderCss"
       });
       


21、revert  //降落的时候会添加过渡效果

jquery-ui sortable详解
jquery-ui sortable详解
jquery-ui sortable详解
jquery-ui sortable详解


22、scroll   //边缘滚动条问题处理  (我自己试验的时候没什么效果)
jquery-ui sortable详解

jquery-ui sortable详解


23、scrollSensitivity  (拖动元素距离滚动条多远时出现滚动条)(自己试没效果)
jquery-ui sortable详解

jquery-ui sortable详解


24、scrollSpeed (滚动条出现速度)(自己试没效果)
jquery-ui sortable详解
jquery-ui sortable详解



25、tolerance //什么时候给新进来的元素空开位子,一种是超过50%的面积占用  第二种是光标进入
jquery-ui sortable详解
jquery-ui sortable详解


26、zIndex   //规定拖放时候的zindex值
jquery-ui sortable详解
jquery-ui sortable详解

接下来略去其方法直接看event事件

27、activate //开始时**
jquery-ui sortable详解jquery-ui sortable详解
jquery-ui sortable详解
jquery-ui sortable详解

28、beforeStop //在完全停止之前
jquery-ui sortable详解jquery-ui sortable详解
jquery-ui sortable详解
jquery-ui sortable详解

29、change  //位置不变不会**,中途只要位置变化就会**
jquery-ui sortable详解jquery-ui sortable详解
jquery-ui sortable详解

jquery-ui sortable详解

30、create //创建的时候**,也就一开始初始化的时候**
jquery-ui sortable详解

jquery-ui sortable详解


31、deactivate  //这个单词本意是停用   停止的时候调用
jquery-ui sortable详解
jquery-ui sortable详解



32、out  //成员从一个表格离去的时候(这个有点儿诡异,会莫名搞两次出来)
jquery-ui sortable详解
jquery-ui sortable详解


33、over  //进入到一个新列表的时候(也会触发两次)
jquery-ui sortable详解jquery-ui sortable详解
jquery-ui sortable详解
jquery-ui sortable详解


34、receive  //完全落入另外一个列表时**(在stop和deactivate之间)
jquery-ui sortable详解jquery-ui sortable详解
jquery-ui sortable详解

jquery-ui sortable详解

35、remove // 在接受与beforestop中间
jquery-ui sortable详解
jquery-ui sortable详解

jquery-ui sortable详解
jquery-ui sortable详解
jquery-ui sortable详解jquery-ui sortable详解

36、sort   //几乎每一小点儿的移动都会触发
jquery-ui sortable详解jquery-ui sortable详解
jquery-ui sortable详解

jquery-ui sortable详解



37、start //start这个动作在所有动作之前(我观察到的所有动作之前)
jquery-ui sortable详解jquery-ui sortable详解
jquery-ui sortable详解
jquery-ui sortable详解

38、stop  //stop这个动作在所有动作之后(几乎)
jquery-ui sortable详解
jquery-ui sortable详解

jquery-ui sortable详解
jquery-ui sortable详解

39、update   // 位置改变了才会**  介于receive和deactivate之间
jquery-ui sortable详解jquery-ui sortable详解
jquery-ui sortable详解
jquery-ui sortable详解

至此,基本上接触到的都介绍完了