快捷導(dǎo)航

Mootools 1.2教程排序類和方法簡介

更新時間：2009年09月15日 22:07:55 作者：

從今天開始，我們將開始講解“更多”（more）庫里面的更多插件。Sortables是一個非常強(qiáng)大的插件，能夠真正地?cái)U(kuò)大你的用戶界面設(shè)計(jì)的選擇面。

Sortables類還提供了包括一個名叫“serialize”的優(yōu)秀方法，通過這個方法你額可以把這些元素的id作為數(shù)組輸出——對于服務(wù)器端的開發(fā)非常有用。接下來，我們看看如何創(chuàng)建一個新的排序項(xiàng)集合，還有一定要看一下最后的演示實(shí)例。
基本知識
創(chuàng)建一個新的Sortable對象
首先，我們要把我們要排序的元素賦值給變量。對于Sortables來說，如果你想要多個列表之間的元素能夠在相互之間拖拽，你需要把這些元素全部都放在一個數(shù)組中，就像這樣：
參考代碼：

復(fù)制代碼代碼如下:

var sortableListsArray = $$('#listA, #listB');

這樣就可以把兩個ul的id放到一個數(shù)組里面了。我們現(xiàn)在就可以從這個數(shù)組創(chuàng)建一個新的sortable對象了：
參考代碼：

復(fù)制代碼代碼如下:

var sortableLists = new Sortables(sortableListsArray);

我們假設(shè)使用的是下面的HTML：
參考代碼：

復(fù)制代碼代碼如下:

 
<ul id="listA"> 
<li>Item A1</li> 
<li>Item A2</li> 
<li>Item A3</li> 
<li>Item A4</li> 
</ul> 
<ul id="listB"> 
<li>Item B1</li> 
<li>Item B2</li 
<li>Item B3</li> 
<li>Item B4</li> 
</ul> 

我們的sortable列表最后看起來大概應(yīng)該是這樣的：
Item A1
Item A2
Item A3
Item A4
Item B1
Item B2
Item B3
Item B4

Sortables選項(xiàng)
如果你想完全定義你自己的sortable列表，你就需要使用這些選項(xiàng)。
constrain
默認(rèn)——false
這個選項(xiàng)決定了你的sortable列表元素是否可以在多個ul之間拖動。
例如，如果你在一個sortable對象中有兩個ul，你可以通過設(shè)置選項(xiàng)“constain:true”來“限制”（constrain）列表的元素只允許在它們的父節(jié)點(diǎn)ul之內(nèi)移動。
參考代碼：

復(fù)制代碼代碼如下:

 
var sortableLists = new Sortables(sortableListsArray, { 
constrain: false // 默認(rèn)為false 
}); 

clone
默認(rèn)——false
克?。╟lone）選項(xiàng)允許你添加一個“clone”的元素跟隨你的鼠標(biāo)移動，而把原始的元素留在原地不動。你可以從下面的例子中看看如何使用clone選項(xiàng)：
參考代碼：

復(fù)制代碼代碼如下:

 
var sortableLists = new Sortables(sortableListsArray, { 
clone: true // 默認(rèn)為false 
}); 

handle
默認(rèn)——false
handler選項(xiàng)可以接受一個元素作為拖動的控制器。如果你要保持你的列表中的文本可以被選中或者保留li的其他行為，使用這個參數(shù)則非常方便。默認(rèn)參數(shù)為false則會使得整個元素（li）成為控制器。
參考代碼：

復(fù)制代碼代碼如下:

 
var handleElements = $$('.handlesClass'); 
var sortableLists = new Sortables(sortableListsArray, { 
handle: handleElements // 默認(rèn)為false 
}); 

opacity
默認(rèn)——1
不透明度（opacity）選項(xiàng)可以讓你調(diào)整排序元素。如果你使用了一個clone的副本，opacity將作用于這個排序元素，而不是更隨你鼠標(biāo)的那個副本。
參考代碼：

復(fù)制代碼代碼如下:

 
var sortableLists = new Sortables(sortableListsArray, { 
opacity: 1 // 默認(rèn)為1 
}); 

revert
默認(rèn)——false
復(fù)原（revert）參數(shù)可以接受“false”或者Fx的選項(xiàng)值。如果你給revert參數(shù)設(shè)置了Fx的選項(xiàng)，那么當(dāng)元素放置到一個位置時會應(yīng)用相應(yīng)的Fx設(shè)置。例如，你可以設(shè)置“duration:long”，那么當(dāng)你松開鼠標(biāo)時，那個克隆的對象將會在這個時間之內(nèi)返回到它的位置。如果要看revert的效果，可以看看下面的例子：
參考代碼：

復(fù)制代碼代碼如下:

 
var sortableLists = new Sortables(sortableListsArray, { 
revert: false // 默認(rèn)為false 
}); 
// 你也可以設(shè)置為Fx選項(xiàng) 
var sortableLists = new Sortables(sortableListsArray, { 
revert: { 
duration: 50 
} 
}); 

snap
默認(rèn)——4
snap參數(shù)允許你設(shè)置鼠標(biāo)必需拖動了多少個像素之后，元素才會被拖動。
參考代碼：

復(fù)制代碼代碼如下:

 
var sortableLists = new Sortables(sortableListsArray, { 
snap: 10 // 用戶需要拖動10px來開始拖動這個拖動列表 
}); 

Sortable事件
sortable事件非常好也非常簡單易用。每一個都會傳遞當(dāng)前拖動的元素（如果你使用了colone元素，不是那個clone的元素，而是原始的元素）。
onStart——當(dāng)拖動開始時觸發(fā)（當(dāng)snap觸發(fā)以后）
onSort——當(dāng)項(xiàng)目改變排序以后觸發(fā)
onComplete——當(dāng)你把一個元素放下以后觸發(fā)
我們會在后面再仔細(xì)看這些事件（你可以在后面的例子中看到效果）。
Sortable方法
盡管我們已經(jīng)使用過很多方法了，但是我們從來沒有詳細(xì)講過。方法本質(zhì)上還是一些函數(shù)，不過它們是屬于某一個類的。不過等我們在講類的時候，我們會第二次再建立一個通用的概念。這個插件（和我們講過的其他插件一樣），全部都遵循一個類似的模式——使用“new”初始化一個插件，定義一個或者多個選擇器參數(shù)，定義你的選項(xiàng)，添加一些事件（和建立新的sortable和tween類似）。這個模式是類的基礎(chǔ)。一個類最基礎(chǔ)的就是允許你保存一些選項(xiàng)和函數(shù)，從而可以重復(fù)使用它們。方法就是一個類里面一些特定的函數(shù)。實(shí)例的.set()和.get()方法則是element的屬性擴(kuò)展方法。在Fx.Tween中，.start()就是一個方法。為了更清晰的理解，我們看看sortable的方法。
.detach();
通過.detach();方法，你可以剝離（detach）所有的控制器，從而使得整個列表都不可以拖動。這對于禁用拖動非常有用。
.attach();
這個方法將把控制器關(guān)聯(lián)到排序項(xiàng)目，可以在使用.detach();方法后再次啟動排序功能。
.addItems();
這個方法可以讓你添加新的項(xiàng)目到你的排序列表中。這個意思是說，你有一個排序列表，用戶可以向里面添加新的項(xiàng)目，一旦你添加了一個新的項(xiàng)目，你就需要在那個新的項(xiàng)目上啟動排序功能。
.removeItems();
這個方法可以讓你從已有的排序列表中刪除一些元素。當(dāng)你需要鎖定排序列表中的一些特殊的項(xiàng)目不讓它參與排序時非常有用。
.addLists();
除了添加一個新項(xiàng)到一個已經(jīng)存在的排序列表中，你也許還想添加一個新的列表到排序列表中。.addLists();方法可以讓你添加多個列表，這使得添加多個排序?qū)ο笞兊谜嬲菀住?
.removeLists();
可以讓你從排序?qū)ο笾幸瞥麄€整個列表。當(dāng)你需要鎖定一些特殊的列表時，這個很有用。你可以移除一個列表，保留下來的其他項(xiàng)目則可以繼續(xù)排序，但是會鎖定這個移除的列表。
.serialize();
這個排序功能非常優(yōu)秀，不過如果你想處理這些數(shù)據(jù)怎么辦？.serialize();方法將依照它們的順序返回包含這些項(xiàng)目id的數(shù)組。你可以通過索引值來選擇你要獲取數(shù)據(jù)的列表。
方法的影響力遠(yuǎn)遠(yuǎn)超過我們這里所涵蓋的內(nèi)容，如果你是新手，那就讓這做為一個簡單的概念介紹吧，我們會在后面的教程中更深入地討論方法和類。
代碼示例
下面的示例使用了一些選項(xiàng)，全部的事件和上面描述的全部方法。希望這個代碼有自解釋性，不多注釋里又更多說明。記住，下面所有的事情都必需在domready事件里面。
參考代碼：

復(fù)制代碼代碼如下:

 
var sortableListsArray = $$('#numberlist, #letterlist'); 
var sortableLists = new Sortables(sortableListsArray, { 
// 當(dāng)我移動的時候，復(fù)制一個副本跟隨鼠標(biāo)移動 
clone: true, 
// 定義拖動控制器（柄，把手）的css類名 
handle: '.handle', 
// 在拖動之后，允許你使用特效讓它回到某個位置 
revert: { 
// 接受Fx選項(xiàng) 
duration: 50 
}, 
// 決定拖動元素的不透明度，而不是跟隨鼠標(biāo)的副本 
opacity: .5, 
onStart: function(el){ 
// 傳遞的是你正在拖動的元素 
$('start_ind').highlight('#F3F865'); 
el.highlight('#F3F865'); 
}, 
onSort: function(el) { 
// 傳遞的是你正在拖動的元素 
$('sort_ind').highlight('#F3F865'); 
}, 
onComplete: function(el) { 
// 傳遞的是你正在拖動的元素 
$('complete_ind').highlight('#F3F865'); 
var listOne = sortableLists.serialize(0); 
var listTwo = sortableLists.serialize(1); 
$('numberOrder').set('text', listOne).highlight('#F3F865'); ; 
$('letterOrder').set('text', listTwo).highlight('#F3F865'); ; 
} 
}).detach(); // 禁用控制器，因此你必需點(diǎn)擊按鈕才能讓它們可以拖動 
var addListoSort = $('addListTest'); 
$('addListButton').addEvent('click', function(){ 
sortableLists.addLists(addListoSort); 
}); 
$('removeListButton').addEvent('click', function(){ 
sortableLists.removeLists(addListoSort); 
}); 
$('enable_handles').addEvent('click', function(){ 
sortableLists.attach(); 
}); 
$('disable_handles').addEvent('click', function(){ 
sortableLists.detach(); 
}); 
var itemOne = $('one'); 
$('add_item').addEvent('click', function(){ 
sortableLists.addItems(itemOne); 
}); 
$('remove_item').addEvent('click', function(){ 
sortableLists.removeItems(itemOne); 
}); 