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


Posted in Javascript onSeptember 15, 2009

它的使用和我们见过的其他的插件类似:首先你使用“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文件和上面的例子。

Javascript 相关文章推荐
禁止JQuery中的load方法装载IE缓存中文件的方法
Sep 11 Javascript
深入理解JavaScript定时机制
Oct 29 Javascript
javascript Array.prototype.slice的使用示例
Nov 14 Javascript
Jquery通过Ajax访问XML数据的小例子
Nov 18 Javascript
Jquery元素追加和删除的实现方法
May 24 Javascript
深入理解jQuery3.0的domManip函数
Sep 01 Javascript
jQuery中ScrollTo用法示例
Sep 04 Javascript
vue2的todolist入门小项目的详细解析
May 11 Javascript
详解Vue2.0 事件派发与接收
Sep 05 Javascript
Vue通过ref父子组件拿值方法
Sep 12 Javascript
vue2.0项目集成Cesium的实现方法
Jul 30 Javascript
通过扫小程序码实现网站登陆功能
Aug 22 Javascript
Mootools 1.2教程 Fx.Morph、Fx选项和Fx事件
Sep 15 #Javascript
Mootools 1.2教程 Fx.Tween的使用
Sep 15 #Javascript
Mootools 1.2教程 输入过滤第二部分(字符串)
Sep 15 #Javascript
Mootools 1.2教程 输入过滤第一部分(数字)
Sep 15 #Javascript
Mootools 1.2教程 设置和获取样式表属性
Sep 15 #Javascript
通过Mootools 1.2来操纵HTML DOM元素
Sep 15 #Javascript
Mootools 1.2教程 事件处理
Sep 15 #Javascript
You might like
echo, print, printf 和 sprintf 区别
2006/12/06 PHP
phpstrom使用xdebug配置方法
2013/12/17 PHP
PHP5.3以上版本安装ZendOptimizer扩展
2015/03/27 PHP
js Html结构转字符串形式显示代码
2011/11/15 Javascript
JS声明变量背后的编译原理剖析
2012/12/28 Javascript
你必须知道的JavaScript 中字符串连接的性能的一些问题
2013/05/07 Javascript
Javascript selection的兼容性写法介绍
2013/12/20 Javascript
javascript(js)的小数点乘法除法问题详解
2014/03/07 Javascript
Bootstrap教程JS插件弹出框学习笔记分享
2016/05/17 Javascript
Bootstrap 最常用的JS插件系列总结(图片轮播、标签切换等)
2016/07/14 Javascript
Vue.js快速入门实例教程
2016/10/15 Javascript
js判断一个字符串是以某个字符串开头的简单实例
2016/12/27 Javascript
express框架实现基于Websocket建立的简易聊天室
2017/08/10 Javascript
javascript性能优化之分时函数的介绍
2018/03/28 Javascript
微信小程序在其他页面监听globalData中值的变化
2019/07/15 Javascript
Webpack设置环境变量的一些误区详解
2019/12/19 Javascript
微信小程序实现简单文字跑马灯
2020/05/26 Javascript
Element InputNumber 计数器的实现示例
2020/08/03 Javascript
复制粘贴功能的Python程序
2008/04/04 Python
利用Python操作消息队列RabbitMQ的方法教程
2017/07/19 Python
使用python编写监听端
2018/04/12 Python
Python实现的直接插入排序算法示例
2018/04/29 Python
Python3 读、写Excel文件的操作方法
2018/10/20 Python
python并发编程多进程之守护进程原理解析
2019/08/20 Python
基于Keras中Conv1D和Conv2D的区别说明
2020/06/19 Python
python如何查看安装了的模块
2020/06/23 Python
Python Pygame实现俄罗斯方块
2021/02/19 Python
Python使用cn2an实现中文数字与阿拉伯数字的相互转换
2021/03/02 Python
租租车:国际租车、美国租车、欧洲租车、特价预订国外租车(中文服务)
2018/03/28 全球购物
美国知名眼镜网站:Target Optical
2020/04/04 全球购物
应届生护士求职信
2013/11/01 职场文书
职工运动会邀请函
2014/01/19 职场文书
幼儿园元旦家长感言
2014/02/27 职场文书
黄石寨导游词
2015/02/05 职场文书
60条职场经典语录,总有一条能触动你的心
2019/08/21 职场文书
Pandas-DataFrame知识点汇总
2022/03/16 Python