MooTools 1.2中的Drag.Move来实现拖放
2024-05-06 14:13:58
供稿：网友
它的使用和我们见过的其他的插件类似：首先你使用“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）元素的选择器（这个元素将会注册拖动相关的事件）
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——这这个事件将在一个可拖动的元素进入一个接受拖动元素的元素时触发。
