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

MooTools 1.2的整理排序类Sortables

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

请尊重个人劳动，转载请注明出处：http://fdream.net，译者：Fdream

如果你还没有准备好开始这一讲，请参考这一系列的教程，这里是《MooTools 1.2系列教程目录》。

从今天开始，我们将开始讲解“更多”（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

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将作用于这个排序元素，而不是更随你鼠标的那个副本。

var sortableLists = new Sortables(sortableListsArray, {
    opacity: 1 // 默认为1
});

revert

默认——false

复原（revert）参数可以接受“false”或者Fx的选项值。如果你给revert参数设置了Fx的选项，那么当元素放置到一个位置时会应用相应的Fx设置。例如，你可以设置“duration:long”，那么当你松开鼠标时，那个克隆的对象将会在这个时间之内返回到它的位置。如果要看revert的效果，可以看看下面的例子：

var sortableLists = new Sortables(sortableListsArray, {
    revert: false // 默认为false
});
 
// 你也可以设置为Fx选项
var sortableLists = new Sortables(sortableListsArray, {
    revert: {
        duration: 50
    }
});

snap

默认——4

snap参数允许你设置鼠标必需拖动了多少个像素之后，元素才会被拖动。

var sortableLists = new Sortables(sortableListsArray, {
    snap: 10 // 用户需要拖动10px来开始拖动这个拖动列表
});

Sortable事件

sortable事件非常好也非常简单易用。每一个都会传递当前拖动的元素（如果你使用了colone元素，不是那个clone的元素，而是原始的元素）。

• onStart——当拖动开始时触发（当snap触发以后）
• onSort——当项目改变排序以后触发
• onComplete——当你把一个元素放下以后触发

我们会在后面再仔细看这些事件（你可以在后面的例子中看到效果）。

Sortable方法

尽管我们已经使用过很多方法了，但是我们从来没有详细讲过。方法本质上还是一些函数，不过它们是属于某一个类的。不过等我们在讲类的时候，我们会第二次再建立一个通用的概念。这个插件（和我们讲过的其他插件一样），全部都遵循一个类似的模式——使用“new”初始化一个插件，定义一个或者多个选择器参数，定义你的选项，添加一些事件（和建立新的sortable和tween类似）。这个模式是类的基础。一个类最基础的就是允许你保存一些选项和函数，从而可以重复使用它们。方法就是一个类里面一些特定的函数。实例的.set()和.get()方法则是element的属性扩展方法。在Fx.Tween中，.start()就是一个方法。为了更清晰的理解，我们看看sortable的方法。

.detach();

通过.detach();方法，你可以剥离（detach）所有的控制器，从而使得整个列表都不可以拖动。这对于禁用拖动非常有用。

.attach();

这个方法将把控制器关联到排序项目，可以在使用.detach();方法后再次启动排序功能。

.addItems();

这个方法可以让你添加新的项目到你的排序列表中。这个意思是说，你有一个排序列表，用户可以向里面添加新的项目，一旦你添加了一个新的项目，你就需要在那个新的项目上启动排序功能。

.removeItems();

这个方法可以让你从已有的排序列表中删除一些元素。当你需要锁定排序列表中的一些特殊的项目不让它参与排序时非常有用。

.addLists();

除了添加一个新项到一个已经存在的排序列表中，你也许还想添加一个新的列表到排序列表中。.addLists();方法可以让你添加多个列表，这使得添加多个排序对象变得真正容易。

.removeLists();

可以让你从排序对象中移除整个整个列表。当你需要锁定一些特殊的列表时，这个很有用。你可以移除一个列表，保留下来的其他项目则可以继续排序，但是会锁定这个移除的列表。

.serialize();

这个排序功能非常优秀，不过如果你想处理这些数据怎么办？.serialize();方法将依照它们的顺序返回包含这些项目id的数组。你可以通过索引值来选择你要获取数据的列表。

方法的影响力远远超过我们这里所涵盖的内容，如果你是新手，那就让这做为一个简单的概念介绍吧，我们会在后面的教程中更深入地讨论方法和类。

代码示例

下面的示例使用了一些选项，全部的事件和上面描述的全部方法。希望这个代码有自解释性，不多注释里又更多说明。记住，下面所有的事情都必需在domready事件里面。

var sortableListsArray = $$('#numberlist, #letterlist');
var sortableLists = new Sortables(sortableListsArray, {
        // 当我移动的时候，复制一个副本跟随鼠标移动
    clone: true,
        // 定义拖动控制器（柄，把手）的css类名
    handle: '.handle',
        // 在拖动之后，允许你使用特效让它回到某个位置
    revert: {
        // 接受Fx选项
        duration: 50
    },
        // 决定拖动元素的不透明度，而不是跟随鼠标的副本
    opacity: .5,
 
    onStart: function(el){
        // 传递的是你正在拖动的元素
        $('start_ind').highlight('#F3F865');
        el.highlight('#F3F865');
    },
    onSort: function(el) {
        // 传递的是你正在拖动的元素
        $('sort_ind').highlight('#F3F865');
    },
    onComplete: function(el) {
        // 传递的是你正在拖动的元素
        $('complete_ind').highlight('#F3F865');
        var listOne = sortableLists.serialize(0);
        var listTwo = sortableLists.serialize(1);
        $('numberOrder').set('text', listOne).highlight('#F3F865');    ;
        $('letterOrder').set('text', listTwo).highlight('#F3F865');    ;
    }
}).detach(); // 禁用控制器，因此你必需点击按钮才能让它们可以拖动
 
var addListoSort = $('addListTest');
 
$('addListButton').addEvent('click', function(){
        sortableLists.addLists(addListoSort);
});
 
$('removeListButton').addEvent('click', function(){
    sortableLists.removeLists(addListoSort);
});
 
$('enable_handles').addEvent('click', function(){
    sortableLists.attach();
});
 
$('disable_handles').addEvent('click', function(){
    sortableLists.detach();
});
 
var itemOne = $('one');
 
$('add_item').addEvent('click', function(){
    sortableLists.addItems(itemOne);
});
 
$('remove_item').addEvent('click', function(){
    sortableLists.removeItems(itemOne);
});

控制器默认是没有启用的（仔细看一下上面的代码）。要开始拖动排序，你需要点击“启用排序”按钮。

• 1
• 2
• 3
• 4
• 5
• 6
• 7

• A
• B
• C
• D
• E
• F
• G

• add A
• add B
• add C
• add D
• add E
• add F
• add G

更多学习

参考阅读文档中有关sortable的这一节。

下载一个包含你开始所需要的所有东西的zip包

包括MooTools 1.2的核心库和扩展（更多）库，上面的示例，一个外部的JavaScript文件，一个简单的HTML页面和一个CSS文件。