MooTools教程(12):Drag.Move来实现拖放

作者佚名技术来源网页制作浏览发布时间 2012-03-07

一些Drag事件和选项

对于Drag，有许多选项和事件，不过这里我们只看一小部分。

snap——选项

snap选项可以让你设置用户的鼠标至少移动多少个像素后开始拖动。默认是6，你额可以设置为任何数字或者值为数字的变量。很明显，这里有一些合理的限制（比如设置snap为1000将毫无用处），但是这在定制你的用户体验时将会派上用场。

参考代码： [复制代码] [保存代码]

var myDrag = new Drag.Move(dragElement , {
// Drag选项
snap: 10
});

handle——选项

handle可以给你的拖动元素添加一个控制对象。这个控制对象将成为唯一的可以接受“抓取”（拖动）的元素，从而允许你使用其他的元素做一些其他的事情。要设置一个控制对象，只需调用这个元素就可以了。

参考代码： [复制代码] [保存代码]

// 这里我们使用了一个类选择器建立了一个数组
// 这将使得我们很轻易地添加多个控制对象，如果我们决定要有多个可接受拖动元素的元素
var dragHandle = $(''drag_handle'');
var myDrag = new Drag.Move(dragElement , {
// Drag选项
handle: dragHandle
});

onStart——事件

onStart和它名字一样，当开始拖动时触发这个事件。如果你设置了一个很大的snap，这个事件将不会触发直到鼠标离开元素有指定的snap值那么远。

参考代码： [复制代码] [保存代码]

var myDrag = new Drag.Move(dragElement , {
// Drag选项
// Drag选项将把拖动的元素作为参数传递
onStart: function(el) {
// 在这里放置开始拖动时你要做的任何事情
}
});

onDarg——事件

这个onDrag事件，将会在你拖动一个元素时连续地触发。

参考代码： [复制代码] [保存代码]

var myDrag = new Drag.Move(dragElement , {
// Drag选项
// Drag选项将把拖动的元素作为参数传递
onDrag: function(el) {
// 在这里放置开始拖动时你要做的任何事情
}
});

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!

上一页 1 2 3 4 5 6 7 下一页

分享到：更多

你可能对下面的文章感兴趣

上一篇: MooTools教程(2):DOM选择器下一篇: MooTools教程(14):定时器和Hash对象

关于MooTools教程(12):Drag.Move来实现拖放的所有评论

随机推荐