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 相关文章推荐
javascript forEach通用循环遍历方法
Oct 11 Javascript
jquery ui resizable bug解决方法
Oct 26 Javascript
说明你的Javascript技术很烂的五个原因
Apr 26 Javascript
jquery中:input和input的区别分析
Jul 13 Javascript
JavaScript中读取和保存文件实例
May 08 Javascript
特殊情况下如何获取span里面的值
May 20 Javascript
jquery中EasyUI实现异步树
Mar 01 Javascript
vuex操作state对象的实例代码
Apr 25 Javascript
通过jquery的ajax请求本地的json文件方法
Aug 08 jQuery
vue简单练习 桌面时钟的实现代码实例
Sep 19 Javascript
Vue项目打包部署到apache服务器的方法步骤
Feb 01 Vue.js
详解JavaScript的计时器和按钮效果设置
Feb 18 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
全国FM电台频率大全 - 17 湖北省
2020/03/11 无线电
迪菲-赫尔曼密钥交换(Diffie?Hellman)算法原理和PHP实现版
2015/05/12 PHP
WampServer搭建php环境时遇到的问题汇总
2015/07/23 PHP
yii框架redis结合php实现秒杀效果(实例代码)
2017/10/26 PHP
THINKPHP5分页数据对象处理过程解析
2020/10/28 PHP
最简单的js图片切换效果实现代码
2011/09/24 Javascript
THREE.JS入门教程(2)着色器-上
2013/01/24 Javascript
Bootstrap Navbar Component实现响应式导航
2016/10/08 Javascript
Javascript 实现简单计算器实例代码
2016/10/23 Javascript
JavaScript使用正则表达式获取全部分组内容的方法示例
2017/01/17 Javascript
node.js中EJS 模板快速入门教程
2017/05/08 Javascript
jQuery滚动插件scrollable.js用法分析
2017/05/25 jQuery
zTree树形菜单交互选项卡效果的实现方法
2017/12/25 Javascript
vue 子组件向父组件传值方法
2018/02/26 Javascript
jQuery+datatables插件实现ajax加载数据与增删改查功能示例
2018/04/17 jQuery
bootstrap-table formatter 使用vue组件的方法
2019/05/09 Javascript
微信小程序中如何使用flyio封装网络请求
2019/07/03 Javascript
vue+canvas实现移动端手写签名
2020/05/21 Javascript
JS常见内存泄漏及解决方案解析
2020/05/30 Javascript
Ruby使用eventmachine为HTTP服务器添加文件下载功能
2016/04/20 Python
Python 通过pip安装Django详细介绍
2017/04/28 Python
浅谈Pandas:Series和DataFrame间的算术元素
2018/12/22 Python
python跳出双层for循环的解决方法
2019/06/24 Python
Django 模型类(models.py)的定义详解
2019/07/19 Python
Python操作SQLite/MySQL/LMDB数据库的方法
2019/11/07 Python
python分布式编程实现过程解析
2019/11/08 Python
解决numpy矩阵相减出现的负值自动转正值的问题
2020/06/03 Python
CSS3 实用技巧:实现黑白图像效果示例代码
2013/07/11 HTML / CSS
超30万乐谱下载:Musicnotes.com
2016/09/24 全球购物
大学生就业求职信
2014/06/12 职场文书
新兵入伍心得体会
2014/09/04 职场文书
湖南省党的群众路线教育实践活动总结会议新闻稿
2014/10/21 职场文书
如何写通讯稿
2015/07/22 职场文书
详解Redis瘦身指南
2021/05/26 Redis
Go 语言中 20 个占位符的整理
2021/10/16 Golang
Mybatis-Plus 使用 @TableField 自动填充日期
2022/04/26 Java/Android