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