Mootools 1.2教程 排序类和方法简介
2024-05-06 14:13:54
供稿：网友
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
Sortables选项
如果你想完全定义你自己的sortable列表，你就需要使用这些选项。
constrain
默认——false
这个选项决定了你的sortable列表元素是否可以在多个ul之间拖动。
例如，如果你在一个sortable对象中有两个ul，你可以通过设置选项“constain:true”来“限制”（constrain）列表的元素只允许在它们的父节点ul之内移动。
参考代码：
代码如下:
var sortableLists = new Sortables(sortableListsArray, {
constrain: false // 默认为false
});
clone
默认——false
克隆（clone）选项允许你添加一个“clone”的元素跟随你的鼠标移动，而把原始的元素留在原地不动。你可以从下面的例子中看看如何使用clone选项：
参考代码：
代码如下:
var sortableLists = new Sortables(sortableListsArray, {
clone: true // 默认为false
});
handle
默认——false
handler选项可以接受一个元素作为拖动的控制器。如果你要保持你的列表中的文本可以被选中或者保留li的其他行为，使用这个参数则非常方便。默认参数为false则会使得整个元素（li）成为控制器。
参考代码：
代码如下:
var handleElements = $$('.handlesClass');
var sortableLists = new Sortables(sortableListsArray, {
handle: handleElements // 默认为false
});
opacity
默认——1
不透明度（opacity）选项可以让你调整排序元素。如果你使用了一个clone的副本，opacity将作用于这个排序元素，而不是更随你鼠标的那个副本。
