Mootools 1.2教程(12)——用Drag.Move实现拖拽和拖放
作者:Fdream 来源:Fdream博客 发布时间:2008-12-05 12:29:00
原文地址:30 Days of Mootools 1.2 Tutorials - Day 12 - Drag and Drop using Drag.Move
使用MooTouls 1.2中的Drag.Move来实现拖放
阅读上一讲:Mootouls 1.2教程(11)——Fx.Morph、Fx选项和Fx事件
今天我们开始第十二讲,今天我们将仔细看一下Drag.Move——一个很强大的MooTouls类,它可以让你给你的web应用添加拖放功能。它的使用和我们见过的其他的插件类似:首先你使用“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) {
// 这个事件将在拖动的元素进入可接受拖动对象的元素时触发
}
});
猜你喜欢
- Socket服务器是网络服务中常用的服务器。使用go语言实现这个业务场景是很容易的。这样的网络通讯,需要一个服务端和至少一个客户端。我们计划
- SQLSERVER与MySQL的差异功能差异SQLServer和MySQL都支持大多数SQL语言的基本功能,如SELECT,UPDATE,I
- 前言:opencv最主要的的功能是用于图像处理,所以图像的概念贯穿了整个opencv,与其相关的核心类就是Mat。像素:图片尺寸以像素为单位
- 本文实例讲述了Python反射的用法。分享给大家供大家参考,具体如下:在做程序开发中,我们常常会遇到这样的需求:需要执行对象里的某个方法,或
- 变量什么是变量?变量是在程序运行时,能存储计算结果或能表示值得抽象概念。简单地说,变量就是在程序运行时,记录数据用的变量定义格式:变量名称=
- 1. MySQL表空间回收我们经常会发现一个问题,就是把表数据删除以后发现,数据文件大小并没有变化,这就是标题中所说的MySQL数据库表空间
- 形态学处理,除了最基本的膨胀、腐蚀、开/闭运算、黑/白帽处理外,还有一些更高级的运用,如凸包,连通区域标记,删除小块区域等。1、凸包凸包是指
- 技术选型公司现在需要开发移动端的h5,使用现在比较流行的vue 2.0开发,使用的脚手架是Vant2,网络访问使用的是axios,路由跳转使
- 导语应好友邀请,帮他写了个小程序,功能类似于实时监控自己关注的UP主,如果关注的UP主中有人发布了抽奖的动态,就自动参与这个抽奖。这样就能不
- TensorFlow更新模型变量。它能一次操作一个数据点,也可以一次操作大量数据。一个训练例子上的操作可能导致比较“古怪”的学习过程,但使用
- 前天由于某些原因需要利用C++调用PyTorch,于是接触到了LibTorch,配了两天最终有了一定的效果,于是记录一下。环境PyTorch
- 问题:输出新建的DataFrame对象时,DataFrame中各列的显示顺序和DataFrame定义中的顺序不一致。例如:import pa
- 1.连接本机数据库 A. 本机若有静态IP,oracle安装好后,就能连接本机oracle数据库。 B. 安装oracle时,本机没有静态I
- 在python中gui编程有很多中选择,如果是相对简单的gui的话使用python自带的tkinter即可,但是由于tkinter没有详细的
- 一、Python2中的字符存在的解码编码问题如果是现在正在用Python2的人应该都知道存在字符编码问题,就举一个最简单的例子吧:Pytho
- 本文实例讲述了Python使用matplotlib 模块scatter方法画散点图。分享给大家供大家参考,具体如下:# -*-coding:
- 点击率预估模型0.前言本篇是一个基础机器学习入门篇文章,帮助我们熟悉机器学习中的神经网络结构与使用。日常中习惯于使用Python各种成熟的机
- ConfigParser模块在python中用来读取配置文件,配置文件的格式跟windows下的ini配置文件相似,可以包含一个或多个节(s
- 本文实例讲述了Python获取运行目录与当前脚本目录的方法。分享给大家供大家参考。具体实现方法如下:import osimport sys#
- 从url中找到域名,首先想到的是用正则,然后寻找相应的类库。用正则解析有很多不完备的地方,url中有域名,域名后缀一直在不断增加等。通过go