MooTools - Sortables

Sortables 是 Web 开发中的一项高级功能，可以真正为您的用户界面设计打开更多选择。它还包括一个名为"serialize"的强大函数，该函数管理元素 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>

Sortables 选项

Sortable 提供不同的选项来自定义可排序对象。让我们讨论一下这些选项。

约束

此选项确定列表元素是否可以在可排序对象内的 ul 之间跳转。例如，如果可排序对象中有两个 ul，则可以通过设置"constrain: true"将列表项"约束"到其父 ul。查看以下设置约束的语法。

语法

var sortableLists = new Sortables(sortableListsArray, {
    constrain: true //false 为默认值
});

克隆

此选项可帮助您在光标下创建一个克隆元素。它有助于对列表元素进行排序。查看 clone 的以下语法。

语法

var sortableLists = new Sortables(sortableListsArray, {
    clone: true //false 为默认值
});

Handle

Handle 是一个接受元素作为拖动手柄的选项。每当您希望列表项可选或希望列表中有任何操作时，这都很有用。如果您不提供任何变量，默认情况下将被视为 false。查看使用 handle 的以下语法。

语法

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

不透明度

此选项可让您调整排序元素。如果您使用克隆，不透明度会影响排序的元素。

语法

var sortableLists = new Sortables(sortableListsArray, {
    opacity: 1 //默认值为 1
});

恢复

此选项接受"false"或任何 Fx 选项。如果您在恢复中设置 Fx 选项，它将创建一个效果，使排序元素稳定到位。查看以下恢复语法。

语法

var sortableLists = new Sortables(sortableListsArray, {
    revert: false //这是默认值
});

//您还可以设置 Fx 选项
var sortableLists = new Sortables(sortableListsArray, {
revert: {
    duration: 50
}
});

Snap

此选项可让您查看在元素开始跟随之前用户将鼠标拖动多少像素。

语法

var sortableLists = new Sortables(sortableListsArray, {
    snap: 10 //用户必须拖动 10 像素才能开始列表排序
});

可排序事件

可排序提供了以下简单易懂的事件。

onStart − 在拖动开始时执行(一旦 snap 结束)
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>

您将收到以下输出 −

MooTools 教程

MooTools 有用资源