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

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文件。