jquery-ui sortable詳解
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之間
至此,基本上接觸到的都介紹完了
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.