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 相关文章推荐
常用参考资料(手册)下载或者链接
Jul 22 Javascript
JS日期和时间选择控件升级版(自写)
Aug 02 Javascript
jquery取消事件冒泡的三种方法(推荐)
May 28 Javascript
js模式化窗口问题![window.dialogArguments]
Oct 30 Javascript
集合Bootstrap自定义confirm提示效果
Sep 19 Javascript
详解JSONObject和JSONArray区别及基本用法
Oct 25 Javascript
vue组件中使用iframe元素的示例代码
Dec 13 Javascript
Koa代理Http请求的示例代码
Oct 10 Javascript
在pycharm中开发vue的方法步骤
Mar 04 Javascript
JavaScript ECMA-262-3 深入解析(一):执行上下文实例分析
Apr 25 Javascript
Vue项目前后端联调(使用proxyTable实现跨域方式)
Jul 18 Javascript
Node快速切换版本、版本回退(降级)、版本更新(升级)
Jan 07 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保存任意网络图片到服务器的方法
2015/04/14 PHP
Mac环境下php操作mysql数据库的方法分享
2015/05/11 PHP
Windows平台实现PHP连接SQL Server2008的方法
2017/07/26 PHP
给jQuery方法添加回调函数一款插件的应用
2013/01/21 Javascript
流量统计器如何鉴别C#:WebBrowser中伪造referer
2015/01/07 Javascript
jquery  实现轮播图详解及实例代码
2016/10/12 Javascript
探讨跨域请求资源的几种方式(总结)
2016/12/02 Javascript
Bootstrap基本组件学习笔记之缩略图(13)
2016/12/08 Javascript
AngularJS Controller作用域
2017/01/09 Javascript
基于daterangepicker日历插件使用参数注意的问题
2017/08/10 Javascript
Vuejs 页面的区域化与组件封装的实现
2017/09/11 Javascript
node.js利用socket.io实现多人在线匹配联机五子棋
2018/05/31 Javascript
vue 指令之气泡提示效果的实现代码
2018/10/18 Javascript
JavaScript 装逼指南(js另类写法)
2020/05/10 Javascript
[01:51]DAC趣味视频-如何成为职业选手.mp4
2017/04/02 DOTA
python根据文件大小打log日志
2014/10/09 Python
python 爬虫 批量获取代理ip的实例代码
2018/05/22 Python
基于python OpenCV实现动态人脸检测
2018/05/25 Python
详解Python3.6的py文件打包生成exe
2018/07/13 Python
Python for循环中的陷阱详解
2018/07/13 Python
Python操作MySQL数据库的两种方式实例分析【pymysql和pandas】
2019/03/18 Python
Python实现爬取亚马逊数据并打印出Excel文件操作示例
2019/05/16 Python
Python获取时间范围内日期列表和周列表的函数
2019/08/05 Python
Python+OpenCv制作证件图片生成器的操作方法
2019/08/21 Python
python是否适合网页编程详解
2019/10/04 Python
Python3变量与基本数据类型用法实例分析
2020/02/14 Python
使用 django orm 写 exists 条件过滤实例
2020/05/20 Python
利用python 下载bilibili视频
2020/11/13 Python
建筑结构施工专业推荐信
2014/02/21 职场文书
投资协议书范本
2014/04/21 职场文书
成立公司计划书
2014/05/07 职场文书
竞争上岗演讲稿范文
2014/05/12 职场文书
给市场的环保建议书
2014/05/14 职场文书
python 实现德洛内三角剖分的操作
2021/04/22 Python
「租借女友」第2季樱泽墨角色PV&新视觉图公开
2022/03/21 日漫
python神经网络ResNet50模型
2022/05/06 Python