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提供了不同的选项来自定义可排序对象.让我们讨论一下选项.
此选项确定列表元素是否可以在可排序对象中的uls之间跳转.例如，如果您在可排序对象中有两个uls，则可以通过设置" constrain:true "将列表项"约束"设置为其父项ul.请查看以下用于设置约束的语法.
语法
var sortableLists = new Sortables(sortableListsArray, {
constrain: true //false is default
});此选项可帮助您在光标下创建克隆元素.它有助于对列表元素进行排序.请查看以下克隆语法.
语法
var sortableLists = new Sortables(sortableListsArray, {
clone: true //false is default
});句柄是一个接受一个元素作为拖动句柄的选项.只要您希望列表项可选，或者您希望列表中有任何操作，这就非常有用.如果您未提供任何变量，则默认情况下将被视为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选项.如果在revert中设置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
}
});此选项可让您查看用户在元素开始跟随之前拖动鼠标的px数.
语法
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>您将收到以下输出 :
