Mootools 1.2教程(12)——用Drag.Move实现拖拽和拖放

原文地址：30 Days of Mootools 1.2 Tutorials - Day 12 - Drag and Drop using Drag.Move

使用MooTouls 1.2中的Drag.Move来实现拖放

阅读上一讲：Mootouls 1.2教程(11)——Fx.Morph、Fx选项和Fx事件

今天我们开始第十二讲，今天我们将仔细看一下Drag.Move——一个很强大的MooTouls类，它可以让你给你的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）元素的选择器（这个元素将会注册拖动相关的事件）
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) { 
        // 这个事件将在拖动的元素进入可接受拖动对象的元素时触发 
    } 
});