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

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

今天我们开始第十二讲，今天我们将仔细看一下Drag.Move——一个很强大的MooTools类，它可以让你给你的web应用添加拖放功能。它的使用和我们见过的其他的插件类似：首先你使用“new”关键字来创建一个Drag.Move对象并赋值给一个变量，然后你再定义你的选项和事件。这就是全部要做的事情，不过你一定要注意一下下面的例子中描述的IE的CSS怪异现象。

基本用法

Drag.Move

创建你自己的拖动对象非常的容易。稍微看一下下面的例子就行了。注意一下我们是怎么把我们的Drag.Move对象的选项和事件从我们的Drag选项和事件中分离出来的。Drag.Move类扩展了Drag类，因此它可以接受Drag类的选项和事件。今天我们并不打算特别地讲一讲Drag类，不过我们还是要研究一下一些有用的选项和事件。看一下下面的代码，然后学习一下其中的细节。

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

var myDrag = new Drag.Move(dragElement, {
// Drag.Move的选项
droppables: dropElement,
container: dragContainer,
// Drag的选项
handle: dragHandle,
// Drag.Move 的事件
// Drag.Move事件会传递拖动的元素，
// 还有可接纳拖动元素的元素（droppable）
onDrop: function(el, dr) {
// 显示拖动到可接纳元素的元素的id
alert(dr.get(''id''));
},
// Drag事件
// Drag事件传递拖动的元素
onComplete: function(el) {
alert(el.get(''id''));
}
});

在这里我们稍微打断一下……

Drag.Move选项

Drag.Move选项有两个很重要的元素：

droppables——设置可接纳的（droppable）元素的选择器（这个元素将会

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

1 2 3 4 5 6 7 下一页

分享到：更多

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

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

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

随机推荐