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 相关文章推荐
MSN消息提示类
Sep 05 Javascript
如何用javascript去掉字符串里的所有空格
Feb 08 Javascript
精心挑选的15个jQuery下拉菜单制作教程
Jun 15 Javascript
深入理解Javascript中this的作用域
Aug 12 Javascript
jquery动态加载js/css文件方法(自写小函数)
Oct 11 Javascript
jquery中取消和绑定hover事件的实现代码
Jun 02 Javascript
js removeChild 方法深入理解
Aug 16 Javascript
js 事件的传播机制(实例讲解)
Jul 20 Javascript
Angular实现下拉框模糊查询功能示例
Jan 03 Javascript
Vue写一个简单的倒计时按钮功能
Apr 20 Javascript
基于Vue实现拖拽功能
Jul 29 Javascript
微信小程序仿美团城市选择
Jun 06 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中的四舍五入函数代码(floor函数、ceil函数、round与intval)
2014/07/14 PHP
PHP中捕获超时事件的方法实例
2015/02/12 PHP
PHP加密解密类实例分析
2015/04/20 PHP
详细讲解JS节点知识
2010/01/31 Javascript
js中页面的重新加载(当前页面/上级页面)及frame或iframe元素引用介绍
2013/01/24 Javascript
JavaScript获取多个数组的交集简单实例
2013/11/11 Javascript
JavaScript获取客户端计算机硬件及系统等信息的方法
2014/01/02 Javascript
JS交换变量的方法
2015/01/21 Javascript
使用jQuery实现返回顶部
2015/01/26 Javascript
Windows系统中安装nodejs图文教程
2015/02/28 NodeJs
在Ubuntu系统上安装Node.JS的教程
2015/10/15 Javascript
JS从一组数据中找到指定的单条数据的方法
2016/06/02 Javascript
JavaScript数组去重由慢到快由繁到简(优化篇)
2016/08/26 Javascript
利用Angularjs和Bootstrap前端开发案例实战
2016/08/27 Javascript
html判断当前页面是否在iframe中的实例
2016/11/30 Javascript
微信小程序 页面跳转传递值几种方法详解
2017/01/12 Javascript
JavaScript实现选中文字提示新浪微博分享效果
2017/06/15 Javascript
在Vue项目中引入腾讯验证码服务的教程
2018/04/03 Javascript
vue调用语音播放的方法
2019/09/27 Javascript
Vue v-for中的 input 或 select的值发生改变时触发事件操作
2020/08/31 Javascript
echarts饼图各个板块之间的空隙如何实现
2020/12/01 Javascript
Python将DataFrame的某一列作为index的方法
2018/04/08 Python
django输出html内容的实例
2018/05/27 Python
python在TXT文件中按照某一字符串取出该字符串所在的行方法
2018/12/10 Python
python设计微型小说网站(基于Django+Bootstrap框架)
2019/07/08 Python
荷兰牛仔裤网上商店:Jeans Centre
2018/04/03 全球购物
英国领先的瓷砖专家:Walls and Floors
2018/04/27 全球购物
美国在线打印网站:Overnight Prints
2018/10/11 全球购物
Boden英国官网:英国知名原创时装品牌
2018/11/06 全球购物
办公自动化专业大学生职业规划书
2014/03/06 职场文书
保险专业求职信
2014/07/07 职场文书
运动与健康自我评价
2015/03/09 职场文书
2015年国庆节慰问信
2015/03/23 职场文书
2015年人事科工作总结
2015/04/28 职场文书
安全生产隐患排查制度
2015/08/05 职场文书
励志语录:只有自己足够强大,才能不被别人践踏
2020/01/09 职场文书