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


Posted in Javascript onSeptember 15, 2009

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); 
});

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

更多学习

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

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

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

Javascript 相关文章推荐
js 判断 enter 事件
Feb 12 Javascript
jquery里的each使用方法详解
Dec 22 Javascript
jquery下为Event handler传递动态参数的代码
Jan 06 Javascript
jQuery操作input值的各种方法总结
Nov 21 Javascript
jQuery插件Skippr实现焦点图幻灯片特效
Apr 12 Javascript
JavaScript事件学习小结(一)事件流
Jun 09 Javascript
jquery submit()不能提交表单的解决方法
Apr 24 jQuery
JavaScript数据结构之双向链表定义与使用方法示例
Oct 27 Javascript
关于vue v-for 循环问题(一行显示四个,每一行的最右边那个计算属性)
Sep 04 Javascript
vue 优化CDN加速的方法示例
Sep 19 Javascript
vue+elementUI中表格高亮或字体颜色改变操作
Nov 02 Javascript
如何用JavaScript学习算法复杂度
Apr 30 Javascript
Mootools 1.2教程 滚动条(Slider)
Sep 15 #Javascript
Mootools 1.2教程 定时器和哈希简介
Sep 15 #Javascript
Mootools 1.2教程 正则表达式
Sep 15 #Javascript
MooTools 1.2中的Drag.Move来实现拖放
Sep 15 #Javascript
Mootools 1.2教程 Fx.Morph、Fx选项和Fx事件
Sep 15 #Javascript
Mootools 1.2教程 Fx.Tween的使用
Sep 15 #Javascript
Mootools 1.2教程 输入过滤第二部分(字符串)
Sep 15 #Javascript
You might like
php自定义函数之递归删除文件及目录
2010/08/08 PHP
PHP发明人谈MVC和网站设计架构 貌似他不支持php用mvc
2011/06/04 PHP
PHP实现单例模式最安全的做法
2014/06/13 PHP
php调用新浪短链接API的方法
2014/11/08 PHP
php实现检查文章是否被百度收录
2015/01/27 PHP
ThinkPHP3.2.3实现分页的方法详解
2016/06/03 PHP
laravel学习教程之存取器
2016/07/30 PHP
php框架CodeIgniter使用redis的方法分析
2018/04/13 PHP
理解JavaScript中的事件
2006/09/23 Javascript
JavaScript聚焦于第一个字段的代码
2010/10/15 Javascript
JS高级调试技巧:捕获和分析 JavaScript Error详解
2014/03/16 Javascript
jquery高级编程的最佳实践详解
2014/03/23 Javascript
node.js中的fs.fchmod方法使用说明
2014/12/16 Javascript
javascript实现获取服务器时间
2015/05/19 Javascript
Radio 单选JS动态添加的选项onchange事件无效的解决方法
2016/12/12 Javascript
JavaScript之Canvas_动力节点Java学院整理
2017/07/04 Javascript
解决修复npm安装全局模块权限的问题
2018/05/17 Javascript
利用Python操作消息队列RabbitMQ的方法教程
2017/07/19 Python
Python探索之pLSA实现代码
2017/10/25 Python
Python插件virtualenv搭建虚拟环境
2017/11/20 Python
计算机二级python学习教程(2) python语言基本语法元素
2019/05/16 Python
python动态进度条的实现代码
2019/07/03 Python
mac使用python识别图形验证码功能
2020/01/10 Python
详解Ubuntu环境下部署Django+uwsgi+nginx总结
2020/04/02 Python
Python虚拟环境的创建和使用详解
2020/09/07 Python
使用html5 canvas创建太空游戏的示例
2014/05/08 HTML / CSS
英国足球店:UK Soccer Shop
2017/11/19 全球购物
Java语言程序设计测试题判断题部分
2013/01/06 面试题
2015年社会实践个人总结
2015/03/06 职场文书
毕业实习单位意见
2015/06/04 职场文书
Mysql实现简易版搜索引擎的示例代码
2021/08/30 MySQL
VUE使用draggable实现组件拖拽
2022/04/06 Vue.js
python中mongodb包操作数据库
2022/04/19 Python
Python使用DFA算法过滤内容敏感词
2022/04/22 Python
CSS文本阴影 text-shadow 悬停效果详解
2022/05/25 HTML / CSS
教你使用Ubuntu搭建DNS服务器
2022/09/23 Servers