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

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

onComplete——事件

最后是onComplete事件，将在你放下一个拖动元素时触发，而不管你是不是把它放到了一个可以接受拖动元素的元素内部。

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

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

代码示例

让我们把刚才的这些代码以一种方式组合起来，当不同的事件触发时，我们突出显示不同的内容，并且我们使用上面我们看到的选项来配置我们的Drag.Move对象：

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

window.addEvent(''domready'', function() {
var dragElement = $(''drag_me'');
var dragContainer = $(''drag_cont'');
var dragHandle = $(''drag_me_handle'');
var dropElement = $(''.draggable'');
var startEl = $(''start'');
var completeEl = $(''complete'');
var dragIndicatorEl = $(''drag_ind'');
var enterDrop = $(''enter'');
var leaveDrop = $(''leave'');
var dropDrop = $(''drop_in_droppable'');
var myDrag = new Drag.Move(dragElement, {
// Drag.Move选项
droppables: dropElement,
container: dragContainer,
// Drag选项
handle: dragHandle,
// Drag.Move事件
onDrop: function(el, dr) {
if (!dr) { }
else {
dropDrop.highlight(''#FB911C''); //橙色闪烁
el.highlight(''#fff''); //白色闪烁
dr.highlight(''#667C4A''); //绿色闪烁
};
},
onLeave: function(el, dr) {
leaveDrop.highlight(''#FB911C''); //橙色闪烁
},
onEnter: function(el, dr) {
enterDrop.highlight(''#FB911C''); //橙色闪烁
},
// Drag事件
onStart: function(el) {
startEl.highlight(''#FB911C''); //橙色闪烁
},
onDrag: function(el) {
dragIndicatorEl.highlight(''#FB911C''); //橙色闪烁
},
onComplete: function(el) {
completeEl.highlight(''#FB911C''); //橙色闪烁
}
});
});

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

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

分享到：更多

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

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

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

随机推荐