MooTools - 可排序元素

可排序元素是Web開發中的一項高階功能，它可以真正擴充套件使用者介面設計的選項。它還包含一個名為“序列化”的強大函式，用於管理元素ID列表，對伺服器端指令碼編寫非常有用。

建立新的可排序物件

首先，我們將專案列表傳送到一個變數。如果需要專案列表的陣列，則將所有集合分配給一個變數。最後，將該變數傳遞給可排序建構函式。請檢視以下建立可排序物件的語法。

語法

var sortableListsArray = $$('#listA, #listB');
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 提供不同的選項來自定義可排序物件。讓我們討論這些選項。

約束 (Constrain)

此選項確定列表元素是否可以在可排序物件內的 ul 之間跳轉。例如，如果可排序物件中有兩個 ul，可以透過設定“constrain: true”將列表項“約束”到其父 ul。請檢視以下設定約束的語法。

語法

var sortableLists = new Sortables(sortableListsArray, {
   constrain: true //false is default
});

克隆 (Clone)

此選項幫助您在游標下建立一個克隆元素。它有助於對列表元素進行排序。請檢視以下克隆的語法。

語法

var sortableLists = new Sortables(sortableListsArray, {
   clone: true //false is default
});

控制代碼 (Handle)

Handle是一個選項，它接受一個元素作為拖動控制代碼。當您希望列表項可選或希望在列表中執行任何操作時，此功能非常有用。如果不提供任何變數，則預設情況下將其視為false。請檢視以下使用控制代碼的語法。

語法

var handleElements = $$('.handlesClass');
var sortableLists = new Sortables(sortableListsArray, {
   handle: handleElements //false is default
});

不透明度 (Opacity)

此選項允許您調整排序元素。如果使用克隆，則不透明度會影響排序的元素。

語法

var sortableLists = new Sortables(sortableListsArray, {
   opacity: 1 //default is 1
});

恢復 (Revert)

此選項接受“false”或任何 Fx 選項。如果在 revert 中設定 Fx 選項，它將為排序的元素建立使其到位的效果。請檢視以下 revert 的語法。

語法

var sortableLists = new Sortables(sortableListsArray, {
   revert: false //this is the default
});

//you can also set Fx options
var sortableLists = new Sortables(sortableListsArray, {
   revert: {
      duration: 50
   }
});

捕捉 (Snap)

此選項讓您看到使用者在元素開始跟隨之前需要拖動滑鼠多少畫素。

語法

var sortableLists = new Sortables(sortableListsArray, {
   snap: 10 //user will have to drag 10 px to start the list sorting
});

可排序事件

Sortable 提供以下簡潔明瞭的事件。

onStart − 拖動開始時執行（捕捉生效後）
onSort − 專案順序更改時執行
onComplete − 將元素放置到位時執行

可排序方法

以下可排序方法實際上是屬於類的函式：

detach()

使用 detach()，您可以“分離”所有當前的控制代碼，使整個列表物件不可排序。這對於停用排序很有用。

attach()

此方法將“附加”控制代碼到排序項，用於在 detach() 後啟用排序。

addItems()

這允許您向可排序列表中新增新專案。假設您有一個可排序列表，使用者可以在其中新增新專案，一旦新增新專案，您就需要為此新專案啟用排序。

removeItems()

此方法允許您刪除可排序列表中專案的排序功能。當您想將特定專案鎖定在特定列表中並阻止其與其他專案排序時，此功能非常有用。

addLists()

您可能不僅想向現有列表新增新專案，還可能想向可排序物件新增一個全新的列表。此方法允許您新增多個列表，從而輕鬆新增更多可排序元素。

removeLists()

讓我們從可排序物件中刪除列表。當您想將特定列表鎖定到位時，此功能非常有用。您可以刪除列表，使物件中的其他列表仍然可排序，但鎖定已刪除列表的內容。

serialize()

所有這些排序都很棒，但是如果您想對資料執行某些操作呢？.serialize(); 將返回專案 ID 列表及其在列表中的順序。您可以透過索引號選擇從物件中獲取資料的列表。

示例

以下示例建立一個帶有編號的 div 元素陣列。稍後，使用滑鼠指標透過單擊、拖動和放下操作重新排列這些元素。請檢視以下程式碼。

<!DOCTYPE html>
<html>
   
   <head>
      <style>
         #test {
            position: inherit;
         }
         ul#sortables {
            width: 300px;
            margin: 0;
            padding: 0;
         }
         li.sortme {
            padding: 4px 8px;
            color: #fff;
            cursor: pointer;
            list-style: none;
            width: 300px;
            background-color: #222;
            border: 1px solid;
         }
         ul#sortables li {
            margin: 10px 0;
         }
      </style>
      
      <script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script>
      <script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script>
      
      <script type = "text/javascript">
         window.addEvent('domready', function() {
            new Sortables($('test'), {
               initialize: function(){
                  var step = 0;
                  
                  this.elements.each(function(element, i) {
                     var color = [step, 82, 87].hsbToRgb();
                     element.setStyle('background-color', color);
                     step = step + 35;
                     element.setStyle('height', $random(40, 100));
                  });
               }
            });
         });
      </script>
   </head>
   
   <body>
      <ul id = "test">
         <li class = "sortme">0</li>
         <li class = "sortme">1</li>
         <li class = "sortme">2</li>
         <li class = "sortme">3</li>
         <li class = "sortme">4</li>
         <li class = "sortme">5</li>
         <li class = "sortme">6</li>
         <li class = "sortme">7</li>
         <li class = "sortme">8</li>
         <li class = "sortme">9</li>
         <li class = "sortme">10</li>
      </ul>
   </body>
   
</html>

您將收到以下輸出：

輸出

列印頁面