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 相关文章推荐
用js实现控件的隐藏及style.visibility的使用
Jun 14 Javascript
浅谈angular懒加载的一些坑
Aug 20 Javascript
JavaScript原生编写《飞机大战坦克》游戏完整实例
Jan 04 Javascript
web前端vue之vuex单独一文件使用方式实例详解
Jan 11 Javascript
vue项目实战总结篇
Feb 11 Javascript
vue图片上传本地预览组件使用详解
Feb 20 Javascript
Element-Ui组件 NavMenu 导航菜单的具体使用
Oct 24 Javascript
js中script的上下放置区别,Dom的增删改创建操作实例分析
Dec 16 Javascript
js this 绑定机制深入详解
Apr 30 Javascript
koa2 数据api中间件设计模型的实现方法
Jul 13 Javascript
Javascript执行上下文顺序的深入讲解
Nov 04 Javascript
Vue的生命周期一起来看看
Feb 24 Vue.js
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电台频率大全 - 29 青海省
2020/03/11 无线电
如何使用php脚本给html中引用的js和css路径打上版本号
2015/11/18 PHP
PHP中each与list用法分析
2016/01/08 PHP
PHP生成指定范围内的N个不重复的随机数
2019/03/18 PHP
php判断目录存在的简单方法
2019/09/26 PHP
在Javascript中为String对象添加trim,ltrim,rtrim方法
2006/09/22 Javascript
『jQuery』名称冲突使用noConflict方法解决
2013/04/22 Javascript
Js中使用hasOwnProperty方法检索ajax响应对象的例子
2014/12/08 Javascript
jQuery插件scroll实现无缝滚动效果
2015/04/27 Javascript
Javascript进制转换实例分析
2015/05/14 Javascript
jquery可定制的在线UEditor编辑器
2015/11/17 Javascript
原生JS实现旋转木马式图片轮播插件
2016/04/25 Javascript
Bootstrap 附加导航(Affix)插件实例详解
2016/06/01 Javascript
关于vue.js组件数据流的问题
2017/07/26 Javascript
JS模拟实现哈希表及应用详解
2018/05/04 Javascript
vue2.0 实现富文本编辑器功能
2019/05/26 Javascript
layui(1.0.9)文件上传upload,前后端的实例代码
2019/09/26 Javascript
基于iview-admin实现动态路由的示例代码
2019/10/02 Javascript
Chrome插件开发系列一:弹窗终结者开发实战
2020/10/02 Javascript
JS指定音频audio在某个时间点进行播放
2020/11/28 Javascript
Python装饰器使用实例:验证参数合法性
2015/06/24 Python
教大家玩转Python字符串处理的七种技巧
2017/03/31 Python
python样条插值的实现代码
2018/12/17 Python
Pytorch使用MNIST数据集实现CGAN和生成指定的数字方式
2020/01/10 Python
Python run()函数和start()函数的比较和差别介绍
2020/05/03 Python
tensorflow之读取jpg图像长和宽实例
2020/06/18 Python
伦敦一家领先的精品零售商:IRIS Fashion
2019/05/24 全球购物
乌克兰电子产品和家用电器购物网站:TOUCH
2019/08/09 全球购物
欧姆龙医疗保健与医疗产品:Omron Healthcare
2020/02/10 全球购物
优质的学校老师推荐信
2013/10/28 职场文书
长辈证婚人证婚词
2014/01/09 职场文书
经济职业学院毕业生自荐书
2014/03/17 职场文书
2014年项目工作总结
2014/11/24 职场文书
公司开会通知
2015/04/20 职场文书
走进科学观后感
2015/06/18 职场文书
win10电脑老是死机怎么办?win10系统老是死机的解决方法
2022/08/05 数码科技