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

代码示例

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

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

更多学习

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

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

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