jquery-ui sortable詳解

該插件的用途:使用鼠標重新排列列表或網格中的元素。helper  這個小夥子總結的不錯
Note: In order to sort table rows, the tbody must be made sortable, not the table.//畢竟tbody是父級嘛

1、appendTo
   說實話這個屬性不是甚瞭解,大致是appendTo父級容器//拖拽的父級節點


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>
    <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 //規定只能在一定的範圍內拖動



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還是沒弄懂草!)
<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>



18、items  //告訴你 下面哪種元素要排序用



19、opacity   //控制拖拽時候的透明程度


20、placeholder  //就是你移入時候 排序元素在着陸點位置的樣式(實際上會給目標着陸點添加指定類)


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


21、revert  //降落的時候會添加過渡效果





22、scroll   //邊緣滾動條問題處理  (我自己試驗的時候沒什麼效果)




23、scrollSensitivity  (拖動元素距離滾動條多遠時出現滾動條)(自己試沒效果)




24、scrollSpeed (滾動條出現速度)(自己試沒效果)




25、tolerance //什麼時候給新進來的元素空開位子,一種是超過50%的面積佔用  第二種是光標進入



26、zIndex   //規定拖放時候的zindex值


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

27、activate //開始時激活


28、beforeStop //在完全停止之前


29、change  //位置不變不會激活,中途只要位置變化就會激活



30、create //創建的時候激活,也就一開始初始化的時候激活




31、deactivate  //這個單詞本意是停用   停止的時候調用




32、out  //成員從一個表格離去的時候(這個有點兒詭異,會莫名搞兩次出來)



33、over  //進入到一個新列表的時候(也會觸發兩次)



34、receive  //完全落入另外一個列表時激活(在stop和deactivate之間)



35、remove // 在接受與beforestop中間




36、sort   //幾乎每一小點兒的移動都會觸發





37、start //start這個動作在所有動作之前(我觀察到的所有動作之前)


38、stop  //stop這個動作在所有動作之後(幾乎)




39、update   // 位置改變了纔會激活  介於receive和deactivate之間


至此,基本上接觸到的都介紹完了









發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章