Menu

30天學會 MooTools 教學(16): 排序類和方法簡介

從今天開始，我們將開始講解「更多」（Mootools More）庫裡面的更多插件。

Sortables是一個非常強大的插件，能夠真正地擴大你的用戶界面設計的選擇面。Sortables類還提供了包括一個名叫「serialize」的 優秀方法，通過這個方法你額可以把這些元素的id作為數組輸出——對於服務器端的開發非常有用。接下來，我們看看如何創建一個新的排序項集合，還有一定要 看一下最後的演示實例。


基本知識

創建一個新的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文件。

 

Mootools 教學列表：