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

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

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

请尊重个人劳动，转载请注明出处：http://fdream.net， 译者：Fdream

如果你还没有准备好开始这一讲，请参考这一系列的教程，这里是《MooTools 1.2系列教程目录》。

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

一些Drag事件和选项

对于Drag，有许多选项和事件，不过这里我们只看一小部分。

snap——选项

snap选项可以让你设置用户的鼠标至少移动多少个像素后开始拖动。默认是6，你额可以设置为任何数字或者值为数字的变量。很明显，这里有一些合理的限制（比如设置snap为1000将毫无用处），但是这在定制你的用户体验时将会派上用场。

var myDrag = new Drag.Move(dragElement , {
    // Drag选项
    snap: 10 
});

handle——选项

handle可以给你的拖动元素添加一个控制对象。这个控制对象将成为唯一的可以接受“抓取”（拖动）的元素，从而允许你使用其他的元素做一些其他的事情。要设置一个控制对象，只需调用这个元素就可以了。

// 这里我们使用了一个类选择器建立了一个数组
// 这将使得我们很轻易地添加多个控制对象，如果我们决定要有多个可接受拖动元素的元素
var dragHandle = $('drag_handle');
var myDrag = new Drag.Move(dragElement , {
    // Drag选项
    handle: dragHandle 
});

onStart——事件

onStart和它名字一样，当开始拖动时触发这个事件。如果你设置了一个很大的snap，这个事件将不会触发直到鼠标离开元素有指定的snap值那么远。

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

onDarg——事件

这个onDrag事件，将会在你拖动一个元素时连续地触发。

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

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'); //橙色闪烁
    }
    });
});

注意一下CSS：在IE中，为了能够适合地注册Drag.Move的容器，你需要在下面的CSS中明确地指出它的位置。最重要的一点是你需要记住设置容器的位置为“position: relative”，而设置可拖动的元素的位置为“position: absolute”，然后一定要设置可拖动元素的left和top属性。现在，如果你正在为其他浏览器构建并且遵循此规则，你可以忽略这一部分：

/* 下面这个定义通常是不错的主意 */
body {
    margin: 0
    padding: 0
}
 
/* 确保可拖动的元素有"position: absolute" */
/* 并设置开始时的left和top属性 */
#drag_me {
    width: 100px
    height: 100px
    background-color: #333
    position: absolute
    top: 0
    left: 0
}
 
 
#drop_here {
    width: 200px
    height: 200px
    background-color: #eee
}
 
/* 确保拖动的容器有“position:relative” */
#drag_cont {
    background-color: #ccc  
    height: 600px 
    width: 500px
    position: relative
    margin-top: 100px
    margin-left: 100px
} 
 
#drag_me_handle {
    width: 100%
    height: auto
    background-color: #666
}
 
#drag_me_handle span {
    display: block
    padding: 5px
}
 
 
.indicator {
    width: 100%
    height: auto
    background-color: #0066FF
    border-bottom: 1px solid #eee
}
 
.indicator span {
    padding: 10px
    display: block
}
 
.draggable {
    width: 200px
    height: 200px
    background-color: blue
}

现在我们再建立我们的HTML：

<div id="drag_cont">
    <div id="start" class="indicator"><span>拖动开始</span></div>
    <div id="drag_ind" class="indicator"><span>拖动中</span></div>
    <div id="complete" class="indicator"><span>拖动结束</span></div>
    <div id="enter" class="indicator"><span>进入了Droppable元素</span></div>
    <div id="leave" class="indicator"><span>离开了Droppable元素</span></div>
    <div id="drop_in_droppable" class="indicator"><span>放进了Droppable元素</span></div>
    <div id="drag_me">
    <div id="drag_me_handle"><span>控制对象</span></div>
    </div>
 
    <div id="drop_here" class="draggable"> </div>
</div>

更多学习……

这里是文档中一些相关的章节：

• Drag
• Drag.Move

下载一个包含你开始所需要的所有东西的zip包

包含MooTools 1.2核心库、MooTools 1.2扩展库，一个包含你的函数的外部JavaScript文件，一个定义你的样式的外部CSS文件，一个简单的HTML文件和上面的例子。