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>

您将收到以下输出：

输出

打印页面