|
|
基本知識(shí)
創(chuàng)建一個(gè)新的Sortable對(duì)象
首先，我們要把我們要排序的元素賦值給變量。對(duì)于Sortables來(lái)說(shuō)，如果你想要多個(gè)列表之間的元素能夠在相互之間拖拽，你需要把這些元素全部都放在一個(gè)數(shù)組中，就像這樣：
參考代碼：
復(fù)制代碼 代碼如下:
var sortableListsArray = $$('#listA, #listB');
這樣就可以把兩個(gè)ul的id放到一個(gè)數(shù)組里面了。我們現(xiàn)在就可以從這個(gè)數(shù)組創(chuàng)建一個(gè)新的sortable對(duì)象了：
參考代碼：
復(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列表最后看起來(lái)大概應(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
這個(gè)選項(xiàng)決定了你的sortable列表元素是否可以在多個(gè)ul之間拖動(dòng)。
例如，如果你在一個(gè)sortable對(duì)象中有兩個(gè)ul，你可以通過(guò)設(shè)置選項(xiàng)“constain:true”來(lái)“限制”（constrain）列表的元素只允許在它們的父節(jié)點(diǎn)ul之內(nèi)移動(dòng)。
參考代碼：
復(fù)制代碼 代碼如下:
var sortableLists = new Sortables(sortableListsArray, {
constrain: false // 默認(rèn)為false
});
clone
默認(rèn)――false
克隆（clone）選項(xiàng)允許你添加一個(gè)“clone”的元素跟隨你的鼠標(biāo)移動(dòng)，而把原始的元素留在原地不動(dòng)。你可以從下面的例子中看看如何使用clone選項(xiàng)：
參考代碼：
復(fù)制代碼 代碼如下:
var sortableLists = new Sortables(sortableListsArray, {
clone: true // 默認(rèn)為false
});
handle
默認(rèn)――false
handler選項(xiàng)可以接受一個(gè)元素作為拖動(dòng)的控制器。如果你要保持你的列表中的文本可以被選中或者保留li的其他行為，使用這個(gè)參數(shù)則非常方便。默認(rèn)參數(shù)為false則會(huì)使得整個(gè)元素（li）成為控制器。
參考代碼：
復(fù)制代碼 代碼如下:
var handleElements = $$('.handlesClass');
var sortableLists = new Sortables(sortableListsArray, {
handle: handleElements // 默認(rèn)為false
});
opacity
默認(rèn)――1
不透明度（opacity）選項(xiàng)可以讓你調(diào)整排序元素。如果你使用了一個(gè)clone的副本，opacity將作用于這個(gè)排序元素，而不是更隨你鼠標(biāo)的那個(gè)副本。
參考代碼：
復(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)元素放置到一個(gè)位置時(shí)會(huì)應(yīng)用相應(yīng)的Fx設(shè)置。例如，你可以設(shè)置“duration:long”，那么當(dāng)你松開鼠標(biāo)時(shí)，那個(gè)克隆的對(duì)象將會(huì)在這個(gè)時(shí)間之內(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)必需拖動(dòng)了多少個(gè)像素之后，元素才會(huì)被拖動(dòng)。
參考代碼：
復(fù)制代碼 代碼如下:
var sortableLists = new Sortables(sortableListsArray, {
snap: 10 // 用戶需要拖動(dòng)10px來(lái)開始拖動(dòng)這個(gè)拖動(dòng)列表
});
Sortable事件
sortable事件非常好也非常簡(jiǎn)單易用。每一個(gè)都會(huì)傳遞當(dāng)前拖動(dòng)的元素（如果你使用了colone元素，不是那個(gè)clone的元素，而是原始的元素）。
onStart――當(dāng)拖動(dòng)開始時(shí)觸發(fā)（當(dāng)snap觸發(fā)以后）
onSort――當(dāng)項(xiàng)目改變排序以后觸發(fā)
onComplete――當(dāng)你把一個(gè)元素放下以后觸發(fā)
我們會(huì)在后面再仔細(xì)看這些事件（你可以在后面的例子中看到效果）。
Sortable方法
盡管我們已經(jīng)使用過(guò)很多方法了，但是我們從來(lái)沒(méi)有詳細(xì)講過(guò)。方法本質(zhì)上還是一些函數(shù)，不過(guò)它們是屬于某一個(gè)類的。不過(guò)等我們?cè)谥v類的時(shí)候，我們會(huì)第二次再建立一個(gè)通用的概念。這個(gè)插件（和我們講過(guò)的其他插件一樣），全部都遵循一個(gè)類似的模式――使用“new”初始化一個(gè)插件，定義一個(gè)或者多個(gè)選擇器參數(shù)，定義你的選項(xiàng)，添加一些事件（和建立新的sortable和tween類似）。這個(gè)模式是類的基礎(chǔ)。一個(gè)類最基礎(chǔ)的就是允許你保存一些選項(xiàng)和函數(shù)，從而可以重復(fù)使用它們。方法就是一個(gè)類里面一些特定的函數(shù)。實(shí)例的.set()和.get()方法則是element的屬性擴(kuò)展方法。在Fx.Tween中，.start()就是一個(gè)方法。為了更清晰的理解，我們看看sortable的方法。
.detach();
通過(guò).detach();方法，你可以剝離（detach）所有的控制器，從而使得整個(gè)列表都不可以拖動(dòng)。這對(duì)于禁用拖動(dòng)非常有用。
.attach();
這個(gè)方法將把控制器關(guān)聯(lián)到排序項(xiàng)目，可以在使用.detach();方法后再次啟動(dòng)排序功能。
.addItems();
這個(gè)方法可以讓你添加新的項(xiàng)目到你的排序列表中。這個(gè)意思是說(shuō)，你有一個(gè)排序列表，用戶可以向里面添加新的項(xiàng)目，一旦你添加了一個(gè)新的項(xiàng)目，你就需要在那個(gè)新的項(xiàng)目上啟動(dòng)排序功能。
.removeItems();
這個(gè)方法可以讓你從已有的排序列表中刪除一些元素。當(dāng)你需要鎖定排序列表中的一些特殊的項(xiàng)目不讓它參與排序時(shí)非常有用。
.addLists();
除了添加一個(gè)新項(xiàng)到一個(gè)已經(jīng)存在的排序列表中，你也許還想添加一個(gè)新的列表到排序列表中。.addLists();方法可以讓你添加多個(gè)列表，這使得添加多個(gè)排序?qū)ο笞兊谜嬲菀住?
.removeLists();
可以讓你從排序?qū)ο笾幸瞥麄€(gè)整個(gè)列表。當(dāng)你需要鎖定一些特殊的列表時(shí)，這個(gè)很有用。你可以移除一個(gè)列表，保留下來(lái)的其他項(xiàng)目則可以繼續(xù)排序，但是會(huì)鎖定這個(gè)移除的列表。
.serialize();
這個(gè)排序功能非常優(yōu)秀，不過(guò)如果你想處理這些數(shù)據(jù)怎么辦？.serialize();方法將依照它們的順序返回包含這些項(xiàng)目id的數(shù)組。你可以通過(guò)索引值來(lái)選擇你要獲取數(shù)據(jù)的列表。
方法的影響力遠(yuǎn)遠(yuǎn)超過(guò)我們這里所涵蓋的內(nèi)容，如果你是新手，那就讓這做為一個(gè)簡(jiǎn)單的概念介紹吧，我們會(huì)在后面的教程中更深入地討論方法和類。
代碼示例
下面的示例使用了一些選項(xiàng)，全部的事件和上面描述的全部方法。希望這個(gè)代碼有自解釋性，不多注釋里又更多說(shuō)明。記住，下面所有的事情都必需在domready事件里面。
參考代碼：
復(fù)制代碼 代碼如下:
var sortableListsArray = $$('#numberlist, #letterlist');
var sortableLists = new Sortables(sortableListsArray, {
// 當(dāng)我移動(dòng)的時(shí)候，復(fù)制一個(gè)副本跟隨鼠標(biāo)移動(dòng)
clone: true,
// 定義拖動(dòng)控制器（柄，把手）的css類名
handle: '.handle',
// 在拖動(dòng)之后，允許你使用特效讓它回到某個(gè)位置
revert: {
// 接受Fx選項(xiàng)
duration: 50
},
// 決定拖動(dòng)元素的不透明度，而不是跟隨鼠標(biāo)的副本
opacity: .5,
onStart: function(el){
// 傳遞的是你正在拖動(dòng)的元素
$('start_ind').highlight('#F3F865');
el.highlight('#F3F865');
},
onSort: function(el) {
// 傳遞的是你正在拖動(dòng)的元素
$('sort_ind').highlight('#F3F865');
},
onComplete: function(el) {
// 傳遞的是你正在拖動(dòng)的元素
$('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)擊按鈕才能讓它們可以拖動(dòng)
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);
});
控制器默認(rèn)是沒(méi)有啟用的（仔細(xì)看一下上面的代碼）。要開始拖動(dòng)排序，你需要點(diǎn)擊“啟用排序”按鈕。
更多學(xué)習(xí)
參考閱讀文檔中有關(guān)sortable的這一節(jié)。
下載一個(gè)包含你開始所需要的所有東西的zip包
包括MooTools 1.2的核心庫(kù)和擴(kuò)展（更多）庫(kù)，上面的示例，一個(gè)外部的JavaScript文件，一個(gè)簡(jiǎn)單的HTML頁(yè)面和一個(gè)CSS文件。
JavaScript技術(shù)：Mootools 1.2教程 排序類和方法簡(jiǎn)介，轉(zhuǎn)載需保留來(lái)源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。
