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

【 tulaoshi.com - Web开发 】

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

基本用法

Drag.Move

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

参考代码：   myDrag =  Drag.Move(dragElement, {        droppables: dropElement,    container: dragContainer,        handle: dragHandle,                onDrop: (el, dr) {                alert(dr.get());    },            onComplete: (el) {        alert(el.get());    }});

在这里我们稍微打断一下

Drag.Move选项

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

droppables设置可接纳的（droppable）元素的选择器（这个元素将会注册拖动相关的事件） container设置拖动元素的容器（可以保证元素一直在容器内）

设置这个选项非常的容易：

参考代码：   dragElement = $(); dropElements = $$();  dragContainer = $(); myDrag =  Drag.Move(dragElement , {            droppables: dropElements ,        container: dragContainer });

现在你的可接受拖动元素的元素就包含进来了，你就有了一个可以接受拖放元素的类。

Drag.Move事件

这个事件可以让你在不同的点去触发一个函数，比如当你开始拖动一个对象或者你准备放下它。每一个Drag.Move事件都将传递拖动元素和接受拖动元素的元素（我们一直叫做droppable）作为参数。

onDrop这个事件将在一个可拖动的元素放到一个接受拖动元素的元素里面时触发。 onLeave这个事件将在一个可拖动的元素离开一个接受拖动元素的元素时触发。 onEnter这这个事件将在一个可拖动的元素进入一个接受拖动元素的元素时触发。

这些事件中的每一个事件都将调用一个函数，每个函数都将在相应的事件触发时调用。

参考代码：   dragContainer = $();  myDrag =  Drag.Move(dragElement , {        droppables: dropElements ,    container: dragContainer ,                onDrop: (el, dr) {                         (!dr) {                     }                                 {                    };    },    onLeave: (el, dr) {            },    onEnter: (el, dr) {            }});

一些Drag事件和选项

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

snap选项

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

参考代码：   myDrag =  Drag.Move(dragElement , {        snap:  });

handle选项

（本文来源于图老师网站，更多请访问http://www.tulaoshi.com/webkaifa/）

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

参考代码：   dragHandle = $(); myDrag =  Drag.Move(dragElement , {        handle: dragHandle });

onStart事件

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

参考代码：   myDrag =  Drag.Move(dragElement , {            onStart: (el) {            }});

onDarg事件

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

参考代码：   myDrag =  Drag.Move(dragElement , {            onDrag: (el) {            }});

onComplete事件

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

参考代码：   myDrag =  Drag.Move(dragElement , {            onComplete: (el) {            }});代码示例

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

参考代码：  window.addEvent(, () {     dragElement = $();     dragContainer = $();     dragHandle = $();     dropElement = $$();     startEl = $();     completeEl = $();     dragIndicatorEl = $();     enterDrop = $();     leaveDrop = $();     dropDrop = $();       myDrag =  Drag.Move(dragElement, {        droppables: dropElement,    container: dragContainer,        handle: dragHandle,        onDrop: (el, dr) {         (!dr) { }          {            dropDrop.highlight();             el.highlight();             dr.highlight();         };    },    onLeave: (el, dr) {        leaveDrop.highlight();     },    onEnter: (el, dr) {        enterDrop.highlight();     },        onStart: (el) {        startEl.highlight();     },    onDrag: (el) {        dragIndicatorEl.highlight();     },    onComplete: (el) {        completeEl.highlight();     }    });});

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

参考代码：  body {    :     : } #drag_me {    :     :     : #    :     :     : }  #drop_here {    :     :     : #eee} #drag_cont {    : #ccc      :      :     :     :     : }  #drag_me_handle {    : %    :     : #} #drag_me_handle span {    :     : }  .indicator {    : %    :     : #    :   #eee} .indicator span {    :     : } .draggable {    :     :     : blue}

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

（本文来源于图老师网站，更多请访问http://www.tulaoshi.com/webkaifa/）参考代码：  div id=    div id= class=span拖动开始/span/div    div id= class=span拖动中/span/div    div id= class=span拖动结束/span/div    div id= class=span进入了Droppable元素/span/div    div id= class=span离开了Droppable元素/span/div    div id= class=span放进了Droppable元素/span/div    div id=    div id=span控制对象/span/div    /div     div id= class= /div/div

拖动开始拖动中拖动结束进入了Droppable元素离开了Droppable元素放进了Droppable元素控制对象 

 

更多学习

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

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