HTML5学习

HTML5学习之一:Drag and Drop(原创)

 

以前我们想实现元素的拖放效果,基本上都是使用DOM事件模型中的Mousedown、Mouseove、Mouseup等事件,来监听鼠标的动作,不停地获取鼠标的坐标来修改元素的位置。这导致代码比较多,而且性能上也不是很好(不停的修改元素的位置导致页面的reflow)现在有了html5原生的Drag &Drop事件(DnD),方便了许多,而且性能也有了提高。

1.如何使对象能够被拖动

所有HTML元素都具有draggable属性,要想让对象能够被拖动,只要设置对象的draggable属性为true。draggable属性具有三个值,分别是true,表示能够被拖动;false表示不能够被拖动;auto视浏览器而定。

 

在大多数的浏览器里面,图片,超链接(<a>),文本都是可以被拖动的。

 

 

1.1拖放事件(拖:Drag,放:Drop)

 

事件

描述

目标

dragstart

开始拖对象时触发

被拖动对象

dragenter

当对象第一次被拖动到目标对象上时触发,同时表示该目标对象允许‘放’这动作

目标对象

dragover

当对象拖动到目标对象时触发

当前目标对象

dragleave

在拖动过程中,当被拖动对象离开目标对象时触发

先前目标对象

drag

每次当对象被拖动时就会触发

被拖动对象

drop

当发生“放”这动作时触发

当前目标对象

dragend

在拖放过程,松开鼠标时触发

被拖动对象

 

注:在拖动过程中,鼠标事件比如mouseover是不会被触发的;

 

 

完成一次成功页面内元素拖拽的行为事件过程应该是: dragstart –> dragenter –> dragover –> drop –> dragend。有了这些事件,通过javascript就可以处理整个拖拽过程。

 

1.2开始拖动(dragstart、dragenter、dragover、dragleave)

 

dragstart:

 

 

注:effectAllowed属性用于初始化dragenterdragover事件中的dropEffect属性

 

dragenter

 

 

dragover

 

 

注:

1)为了阻止浏览器的默认行为,比如拖动某链接(<a>)标签时,防止跳转到链接的地址,所以这边需要调用e.preventDefault();另外一个针对IE,需要在dragover事件中添加return false

2)将设置对象的class属性放在dragenter事件中处理,是因为dragenter事件只会在对象第一次被拖动到目标对象上触发。如果放在dragover事件中的话,就会不停触发设置class的事件,导致浏览器不断的重绘。

 

1.3完成拖动(drop、dragend)

drop

 

 

注:这边需要阻止事件在DOM节点中冒泡,所以需要调用e.stopPropagation()

 

dragend

 

 

2.DATATRANSFER对象

 

DnD API中我觉得最帅的一个属性,就是这个DataTransfer了。它可以用来在拖放过程中传递数据。拖放过程中可以存储的数据类型有两种:一种是字符串(Plain Unicode string),另一种是文件(File);

 

拖放数据的存储模式:

Read/write mode在dragstart事件中,可以添加拖放数据项

Read-only mode在drop事件中,拖放数据项只能被读,不能添加数据项

Protected mode其他的drag事件,只能枚举拖放数据项

 

DataTransfer接口:

 

 

注:

1dropeffect,如果该属性值不是effectallowed中规定的属性,该drop动作就会失败;

2setDataImage(),设置拖动过程中跟随鼠标的图片,用来替代默认的元素;

 

 

3addElement,添加一起跟随拖拽的元素,如果你想让某个元素跟随被拖拽元素一同被拖拽,则使用此方法;

4)setData和getData

 

5)结合File Api,可以获得本地拖放文件。FileReader专门用于读取文件,根据 W3C 的定义,FileReader 接口“提供一些读取文件的方法与一个包含读取结果的事件模型”。

 

欢迎转载,转载时请注明出处:http://www.cnblogs.com/wpfpizicai/

摘要: 本节摘要及说明:本节只是对学习过程中知识点的一个简单的记录。<body>标签的属性Text属性:用于设定整个网页中的文字颜色link属性:用于设定一般超链接文本的显示颜色alink属性:用于设定鼠标移动到超链接上时,超链接文本的显示颜色vlink属性:用于设定访问过的超链接文本的显示颜色background属性:用于设定背景墙纸所用的图像文件,可以是GIF或JPEG文件的绝对路径bgcolor属性:用于设定背景颜色,当已设定墙纸时,这个属性会失去作用,除非墙纸具有透明部分leftmargin属性:用于设定网页显示画面与浏览器窗口左边沿的间隙,单位为像素topmargin属性:用于设 阅读全文
posted @  2012-03-26 22:29 月月鸟0820 阅读(185) |  评论 (0)  编辑
 
摘要: 本节简介:本节主要是对ibatis学习笔记的记载,通过对oracle数据库自带的部门表dept的CRUD来学习ibatis的使用preparation1.关于ibatisibatis是一种半自动化的ORM框架2.项目环境介绍System:WIN7 JDK:编译1.4 开发1.5 数据库:oracle的dept表3.文件介绍Dept.java 一个javabeanIDeptSV.java 一个接口,用来声明增、删、改、查的方法DeptSVImpl.java 对IDeptSV接口的实现,主要包括获得SqlMapClient对象以及方法体的实现ShowDept.java 用来测试的方法.通过ECS插 阅读全文
posted @  2012-03-21 23:04 月月鸟0820 阅读(267) |  评论 (3)  编辑
 
摘要: 本节摘要:最近在做系统的外围接口,工作中涉及到了JSON这个知道点,本节主要是对JSON的学习做一个简单的记录。preparation1.关于JSON的介绍JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式,易于人阅读和编写,同时也易于机器解析和生成。JSON建构于两种结构:1. “名称/值”对的集合(A collection of name/value pairs)。不同的语言中,它被理解为对象(object),记录(record),结构(struct),字典(dictionary),哈希表(hash table),有键列表(keyed list), 阅读全文
posted @  2012-03-17 15:49 月月鸟0820 阅读(38) |  评论 (0)  编辑
 
摘要: 本节摘要:本节主要简单介绍一下javamail插件的使用引入:最近项目中要做一个简单的邮件功能,即从前台输入邮件内容,去配置文件中读取发件人、收件人等信息后,然后发送邮件到指定的邮箱,其中收件人和抄送人可以有多个,基于这个需求,查询了相关资料,决定采用javamail这个插件来实现。preparation:1.JavaMail的介绍 JavaMail,顾名思义,提供给开发者处理电子邮件相关的编程接口。它是Sun发布的用来处理email的API。它可以方便地执行一些常用的邮件传输。 虽然JavaMail是Sun的API之一,但它目前还没有被加在标准的java开发工具包中(Java Develo. 阅读全文
posted @  2012-03-06 22:46 月月鸟0820 阅读(1173) |  评论 (12)  编辑

你可能感兴趣的:(html5)