Mootools 1.2教程(16)——排序类和方法简介

MooTools 1.2的整理排序类Sortables

原文地址：30 Days of Mootools 1.2 Tutorials - Day 16 - Sortables and Intro to Methods

阅读上一讲：Mootools 1.2教程(15)——滚动条（Slider）

从今天开始，我们将开始讲解“更多”（more）库里面的更多插件。Sortables是一个非常强大的插件，能够真正地扩大你的用户界面设计的选择面。Sortables类还提供了包括一个名叫“serialize”的优秀方法，通过这个方法你额可以把这些元素的id作为数组输出——对于服务器端的开发非常有用。接下来，我们看看如何创建一个新的排序项集合，还有一定要看一下最后的演示实例。

基本知识

创建一个新的Sortable对象

首先，我们要把我们要排序的元素赋值给变量。对于Sortables来说，如果你想要多个列表之间的元素能够在相互之间拖拽，你需要把这些元素全部都放在一个数组中，就像这样：

参考代码： 

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

这样就可以把两个ul的id放到一个数组里面了。我们现在就可以从这个数组创建一个新的sortable对象了：

参考代码： 

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列表最后看起来大概应该是这样的：

Item A1 
Item A2 
Item A3 
Item A4 


Item B1 
Item B2 
Item B3 
Item B4