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控制表格隔行变色
Jun 26 Javascript
js获取GridView中行数据的两种方法 分享
Jul 13 Javascript
javascript实用方法总结
Feb 06 Javascript
jQuery表单域属性过滤器用法分析
Feb 10 Javascript
使用EVAL处理jqchart jquery 折线图返回数据无效的解决办法
Nov 26 Javascript
checkbox 选中一个另一个checkbox也会选中的实现代码
Jul 09 Javascript
js中的关联数组与普通数组详解
Jul 27 Javascript
集成vue到jquery/bootstrap项目的方法
Feb 10 jQuery
利用js实现前后台传送Json的示例代码
Mar 29 Javascript
微信小程序地图(map)组件点击(tap)获取经纬度的方法
Jan 10 Javascript
使用原生JS实现滚轮翻页效果的示例代码
May 31 Javascript
html-webpack-plugin修改页面的title的方法
Jun 18 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 无限级数据JSON格式及JS解析
2010/07/17 PHP
使用配置类定义Codeigniter全局变量
2014/06/12 PHP
php blowfish加密解密算法
2016/07/02 PHP
postfixadmin忘记密码后的修改密码方法详解
2016/07/20 PHP
php实现替换手机号中间数字为*号及隐藏IP最后几位的方法
2016/11/16 PHP
php计算多个集合的笛卡尔积实例详解
2017/02/16 PHP
PHP面向对象程序设计(OOP)之方法重写(override)操作示例
2018/12/21 PHP
PHP微商城开源代码实例
2019/03/27 PHP
利用javascript实现web页面中指定区域打印
2013/10/30 Javascript
JS实现很酷的水波文字特效实例
2015/02/26 Javascript
js实现网页右上角滑出会自动消失大幅广告的方法
2015/02/27 Javascript
js立即执行函数: (function ( ){})( ) 与 (function ( ){}( )) 有什么区别?
2015/11/18 Javascript
JavaScript绑定事件监听函数的通用方法
2016/05/14 Javascript
详解如何较好的使用js
2016/12/16 Javascript
微信小程序使用navigateTo数据传递的实例
2017/09/26 Javascript
微信小程序实现获取自己所处位置的经纬度坐标功能示例
2017/11/30 Javascript
详解在Vue中使用TypeScript的一些思考(实践)
2018/07/06 Javascript
JavaScript插入排序算法原理与实现方法示例
2018/08/06 Javascript
VUE简单的定时器实时刷新的实现方法
2019/01/20 Javascript
微信小程序间使用navigator跳转传值问题实例分析
2020/03/27 Javascript
[03:28]2014DOTA2国际邀请赛 走近EG战队天才中单Arteezy
2014/07/12 DOTA
python控制台显示时钟的示例
2014/02/24 Python
python中使用百度音乐搜索的api下载指定歌曲的lrc歌词
2014/07/18 Python
Python去除列表中重复元素的方法
2015/03/20 Python
对pandas的dataframe绘图并保存的实现方法
2017/08/05 Python
用tensorflow实现弹性网络回归算法
2018/01/09 Python
在VS Code上搭建Python开发环境的方法
2018/04/06 Python
python用plt画图时,cmp设置方法
2018/12/13 Python
Python读取csv文件分隔符设置方法
2019/01/14 Python
Python循环实现n的全排列功能
2019/09/16 Python
IntelliJ 中配置 Anaconda的过程图解
2020/06/01 Python
详解Canvas事件绑定
2018/06/27 HTML / CSS
财务专业大学生职业生涯规划范文
2013/12/30 职场文书
优秀中职教师事迹材料
2014/08/26 职场文书
2015年幼儿园新年寄语
2014/12/08 职场文书
《有余数的除法》教学反思
2016/02/22 职场文书