Mootools 1.2教程(16)——排序类和方法简介(2)
作者:Fdream 来源:Fdream博客 时间:2008-12-10 14:18:00
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来开始拖动这个拖动列表
});
标签:mootools,排序,类,教程,javascript
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
css特性:空白外边距互相叠加
2010-06-21 10:53:00
![](https://img.aspxhome.com/file/UploadPic/20106/21/100530a-82s.jpg)
针对SQL Server中业务规则链接的分析
2009-01-20 11:43:00
针对google Chrome的 CSS hacks
2009-11-30 12:45:00
jQuery方法扩展:type, toJSON, evalJSON
2009-02-15 12:42:00
奇淫技巧之图片切割
2010-09-21 13:24:00
ASP中查询数据库记录写入XML文件示例
2007-08-23 13:12:00
JS:firefox 兼容性问题
2009-08-01 16:20:00
基于关系型数据库引擎的\\XML\\索引技术
2008-09-05 17:13:00
设计师的职业规划
2009-08-31 12:52:00
IBatis.net连接MySql 问题与故障的解决方案
2011-06-02 09:38:00
淘宝CSS框架研究(1):Reset CSS(八卦篇)
2009-03-31 12:58:00
什么是 XML Web Service
2008-09-05 17:21:00
土豆网前端概况
2008-01-24 12:06:00
![](https://img.aspxhome.com/file/UploadPic/20081/24/2008124121710861s.jpg)
js中鼠标滚轮事件详解
2010-02-05 12:20:00
![](https://img.aspxhome.com/file/UploadPic/20102/5/wheelchrome-82s.png)
完美的渐变透明效果,支持Firefox
2008-06-18 18:18:00
网页视频播放器程序代码(通用代码),支持avi,wmv,asf,mov,rm,ra,ram等
2008-07-16 11:56:00
发一个数字拼图网页游戏
2008-10-12 10:02:00
ASP去掉字符串头尾连续回车和空格的Function
2011-04-03 11:13:00
asp如何对用户进行授权?
2009-11-20 18:46:00
关于 MediaPlayer 播放器参数详解
2008-08-10 18:33:00