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

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

注册拖动相关的事件）

container——设置拖动元素的容器（可以保证元素一直在容器内）

设置这个选项非常的容易：

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

// 这里我们通过id定义了一个元素
var dragElement = $(''drag_element'');
// 这里我们通过class定义了一组元素
var dropElements = $(''.drag_element'');
var dragContainer = $(''drag_container'');
// 现在创建我们的Drag.Move对象
var myDrag = new Drag.Move(dragElement , {
// Drag.Move选项
// 把我们上面定义的droppable赋值给droppables
droppables: dropElements ,
// 把我们的容器元素变量赋值给容器
container: dragContainer
});

现在你的可接受拖动元素的元素就包含进来了，你就有了一个可以接受拖放元素的类。

Drag.Move事件

这个事件可以让你在不同的点去触发一个函数，比如当你开始拖动一个对象或者你准备放下它。每一个Drag.Move事件都将传递拖动元素和接受拖动元素的元素（我们一直叫做droppable）作为参数。

onDrop——这个事件将在一个可拖动的元素放到一个接受拖动元素的元素里面时触发。
onLeave——这个事件将在一个可拖动的元素离开一个接受拖动元素的元素时触发。
onEnter——这这个事件将在一个可拖动的元素进入一个接受拖动元素的元素时触发。

这些事件中的每一个事件都将调用一个函数，每个函数都将在相应的事件触发时调用。

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

var dragContainer = $(''drag_container'');
var myDrag = new Drag.Move(dragElement , {
// Drag.Move选项
droppables: dropElements ,
container: dragContainer ,
// Drag.Move事件
// Drag.Move函数将传递可拖动的元素（这个例子中是''el''）
// 还有接受拖动元素的元素（这个例子中是''dr''）
onDrop: function(el, dr) {
// 下面这句的意思大概是：
// 如果你拖动的元素不是到了可以接受拖动元素的元素的范围内
if (!dr) {
// 什么都不做
}
// 否则（从逻辑上讲，
// 如果你拖动的那个的元素到了可接受拖动元素的元素范围内）
// 做这一件事件
else {
// 在这里做一些事情
};
},
onLeave: function(el, dr) {
// 这个事件将在拖动的元素离开可接受拖动对象的元素时触发
},
onEnter: function(el, dr) {
// 这个事件将在拖动的元素进入可接受拖动对象的元素时触发
}
});

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

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

分享到：更多

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

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

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

随机推荐