Sortables是Web开发中的一项高级功能，可以在您的用户界面设计中真正打开选项。它还包括一个称为“序列化”的强大函数，该功能管理元素ID的列表，对服务器端脚本很有用。

创建一个新的可排序对象

首先，我们将项目列表发送到变量。如果要使用项目列表的数组，则将所有集合分配给一个变量。并且，最后将该变量传递给可排序的构造函数。查看以下语法以创建可排序的对象。

句法

var sortableListsArray = $$('#listA, #listB');
var sortableLists = new Sortables(sortableListsArray);

以下是该语法的HTML代码。

句法

   
Item A1
   
Item A2
   
Item A3
   
Item A4



   
Item B1
   
Item B2
Item B3
   
Item B4

分类选项

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

处理

句柄是一个接受元素作为拖动句柄的选项。每当您希望选择列表项或希望列表中有任何操作时，此功能就很有用。如果不提供任何变量，则默认情况下将其视为false。看一下以下使用handle的语法。

句法

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（）之后启用排序。

addItems（）

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

removeItems（）

此方法使您可以删除可排序列表中项目的排序功能。当您想将特定项目锁定在特定列表中而不让其与其他项目排序时，这很有用。

addLists（）

您可能想将整个列表添加到可排序对象中，而不仅仅是将新项目添加到现有列表中。此方法使您可以添加多个列表，从而使添加更多可排序对象变得非常容易。

removeLists（）

让我们从可排序对象中删除列表。当您想要将特定列表锁定在适当位置时，这很有用。您可以删除列表，将其他列表保留在可排序对象中，但锁定已删除列表的内容。

连载（）

所有这些排序都很棒，但是如果您想对数据做些什么呢？ 。连载（）;将返回商品ID的列表及其在列表中的顺序。您可以选择通过索引号从对象内部获取数据的列表。

例

以下示例创建一个带编号的div元素数组。稍后，使用鼠标指针通过单击，拖动和放下动作来重新排列它们。看一下下面的代码。

      
      
      
      
      
   
   
   
      

         
0
         
1
         
2
         
3
         
4
         
5
         
6
         
7
         
8
         
9
         
10
      
   
   

您将收到以下输出-

输出