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 相关文章推荐
NiftyCube——轻松实现圆角边框
Feb 20 Javascript
关于js中alert弹出窗口文本换行问题简单详细说明
Dec 11 Javascript
js设置cookie过期及清除浏览器对应名称的cookie
Oct 24 Javascript
javascript实现延时显示提示框特效代码
Apr 27 Javascript
Web打印解决方案之证件套打的实现思路
Aug 29 Javascript
js插件Jcrop自定义截取图片功能
Oct 14 Javascript
vue filters的使用详解
Jun 11 Javascript
微信小程序项目实践之主页tab选项实现
Jul 18 Javascript
vue-quill-editor+plupload富文本编辑器实例详解
Oct 19 Javascript
element ui table 增加筛选的方法示例
Nov 02 Javascript
小程序实现订单倒计时功能
Apr 23 Javascript
Vue Elenent实现表格相同数据列合并
Nov 30 Vue.js
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动态生成JavaScript代码
2009/03/09 PHP
apache+codeigniter 通过.htcaccess做动态二级域名解析
2012/07/01 PHP
PHP基于关联数组20行代码搞定约瑟夫问题示例
2017/11/07 PHP
推荐 21 款优秀的高性能 Node.js 开发框架
2014/08/18 Javascript
swtich/if...else的替代语句
2015/08/16 Javascript
基于javascript实现listbox左右移动
2016/01/29 Javascript
codeMirror插件使用讲解
2017/01/16 Javascript
Bootstrap笔记—折叠实例代码
2017/03/13 Javascript
Angular2利用组件与指令实现图片轮播组件
2017/03/27 Javascript
JS实现新建文件夹功能
2017/06/17 Javascript
微信小程序删除处理详解
2017/08/16 Javascript
详解VueRouter进阶之导航钩子和路由元信息
2017/09/13 Javascript
js中的闭包学习心得
2018/02/06 Javascript
解析vue data不可以使用箭头函数问题
2018/07/03 Javascript
微信小程序显示倒计时功能示例【测试可用】
2018/12/03 Javascript
使用jQuery如何写一个含验证码的登录界面
2019/05/13 jQuery
微信小程序之滑动页面隐藏和显示组件功能的实现代码
2020/06/19 Javascript
js实现轮播图效果 纯js实现图片自动切换
2020/08/09 Javascript
[44:15]国士无双DOTA2 6.82版本详解(上)
2014/09/28 DOTA
使用python编写批量卸载手机中安装的android应用脚本
2014/07/21 Python
Python解析excel文件存入sqlite数据库的方法
2016/11/15 Python
Python 删除整个文本中的空格,并实现按行显示
2018/07/24 Python
解决pycharm工程启动卡住没反应的问题
2019/01/19 Python
Python 操作 PostgreSQL 数据库示例【连接、增删改查等】
2020/04/21 Python
python定时截屏实现
2020/11/02 Python
pandas按条件筛选数据的实现
2021/02/20 Python
彪马美国官网:PUMA美国
2017/03/09 全球购物
租房协议书范文
2014/08/20 职场文书
企业与个人合作经营协议书
2014/11/01 职场文书
公务员政审材料范文
2014/12/23 职场文书
2015年学校教研室主任工作总结
2015/07/20 职场文书
中秋节感想
2015/08/10 职场文书
90条交通安全宣传标语
2019/10/12 职场文书
Python 读写 Matlab Mat 格式数据的操作
2021/05/19 Python
SpringCloud Feign请求头删除修改的操作代码
2022/03/20 Java/Android
科学家测试在太空中培育人造肉,用于未来太空旅行
2022/04/29 数码科技