MooTools - 可排序

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>

可排序选项

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

约束

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

句法

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

克隆

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

句法

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

处理

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

句法

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

不透明度

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

句法

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

恢复

此选项接受“false”或任何 Fx 选项。如果您在恢复中设置 Fx 选项，它将产生使已排序元素固定到位的效果。看一下以下恢复语法。

句法

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
   }
});

折断

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

句法

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() 之后启用排序。

添加项目()

这允许您将新项目添加到可排序列表中。假设您有一个可排序列表，用户可以在其中添加新项目，添加该新项目后，您将需要对该新项目启用排序。

删除项目()

此方法允许您删除可排序列表中项目的排序功能。当您想要锁定特定列表中的特定项目而不让它与其他项目一起排序时，这非常有用。

添加列表()

您可能想要向可排序对象添加一个全新的列表，而不是仅仅向现有列表添加新项目。此方法允许您添加多个列表，从而使添加更多可排序项变得非常容易。

删除列表()

让我们从可排序对象中删除列表。当您想要锁定特定列表时，这非常有用。您可以删除该列表，使其他列表仍然在对象中可排序，但锁定已删除列表的内容。

连载（）

所有这些排序都很棒，但是如果您想对数据执行某些操作该怎么办？。连载（）; 将返回项目 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>

您将收到以下输出 -