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 相关文章推荐
URI、URL和URN之间的区别与联系
Dec 20 Javascript
基于jquery的自定义鼠标提示效果 jquery.toolTip
Nov 14 Javascript
js仿百度登录页实现拖动窗口效果
Mar 11 Javascript
基于jQuery实现音乐播放试听列表
Apr 14 Javascript
Bootstrap模仿起筷首页效果
May 09 Javascript
json与jsonp知识小结(推荐)
Aug 16 Javascript
浅谈webpack打包过程中因为图片的路径导致的问题
Feb 21 Javascript
小程序实现带年月选取效果的日历
Jun 27 Javascript
Vue+Mock.js模拟登录和表格的增删改查功能
Jul 26 Javascript
javascript 关于赋值、浅拷贝、深拷贝的个人理解
Nov 01 Javascript
JS对日期操作封装代码实例
Nov 08 Javascript
小程序使用分包的示例代码
Mar 23 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
用php或asp创建网页桌面快捷方式的代码
2010/03/23 PHP
php curl 登录163邮箱并抓取邮箱好友列表的代码(经测试)
2011/04/07 PHP
PHP函数分享之curl方式取得数据、模拟登陆、POST数据
2014/06/04 PHP
PHP通过API获取手机号码归属地
2015/05/28 PHP
windows8.1下Apache+Php+MySQL配置步骤
2015/10/30 PHP
PHP获取数组中单列值的方法
2017/06/10 PHP
PHP读取、解析eml文件及生成网页的方法示例
2017/09/04 PHP
javascript模仿msgbox提示效果代码
2008/06/10 Javascript
javascript 二维数组的实现与应用
2010/03/16 Javascript
Chrome中JSON.parse的特殊实现
2011/01/12 Javascript
JQuery中dataGrid设置行的高度示例代码
2014/01/03 Javascript
使用jquery实现以post打开新窗口
2014/03/19 Javascript
jquery实现页面关键词高亮显示的方法
2015/03/12 Javascript
jQuery实现表格展开与折叠的方法
2015/05/04 Javascript
js实现跨域的4种实用方法原理分析
2015/10/29 Javascript
微信小程序实战之仿android fragment可滑动底部导航栏(4)
2020/04/16 Javascript
jQuery实现使用sort方法对json数据排序的方法
2018/04/17 jQuery
Javascript Dom元素获取和添加详解
2019/09/24 Javascript
javascript设计模式 ? 模板方法模式原理与用法实例分析
2020/04/23 Javascript
JS原型对象操作实例分析
2020/06/06 Javascript
小程序实现录音功能
2020/09/22 Javascript
高性能web服务器框架Tornado简单实现restful接口及开发实例
2014/07/16 Python
python 随机数使用方法,推导以及字符串,双色球小程序实例
2017/09/12 Python
python仿evething的文件搜索器实例代码
2019/05/13 Python
Python partial函数原理及用法解析
2019/12/11 Python
Django models文件模型变更错误解决
2020/05/11 Python
如何利用python读取micaps文件详解
2020/10/18 Python
matplotlib 使用 plt.savefig() 输出图片去除旁边的空白区域
2021/01/05 Python
在校生汽车维修实习自我鉴定
2013/09/19 职场文书
档案管理员岗位职责
2013/12/01 职场文书
施工班组长岗位职责
2014/01/05 职场文书
联欢晚会主持词
2014/03/25 职场文书
大学生评语大全
2014/04/18 职场文书
学生会竞选演讲稿纪检部
2014/08/25 职场文书
督导岗位职责范本
2015/04/10 职场文书
工作态度检讨书范文
2015/05/06 职场文书