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 属性用于初始化 dragenter 和 dragover 事件中的 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 接口：
注：
1 ） dropeffect ，如果该属性值不是 effectallowed 中规定的属性，该 drop 动作就会失败；
2 ） setDataImage() ，设置拖动过程中跟随鼠标的图片，用来替代默认的元素；
3 ） addElement, 添加一起跟随拖拽的元素，如果你想让某个元素跟随被拖拽元素一同被拖拽，则使用此方法；
4）setData和getData
5）结合File Api，可以获得本地拖放文件。FileReader专门用于读取文件，根据 W3C 的定义，FileReader 接口“提供一些读取文件的方法与一个包含读取结果的事件模型”。
欢迎转载，转载时请注明出处：http://www.cnblogs.com/wpfpizicai/
张孝祥javascript学习笔记1---HTML&CSS
摘要: 本节摘要及说明：本节只是对学习过程中知识点的一个简单的记录。<body>标签的属性Text属性:用于设定整个网页中的文字颜色link属性:用于设定一般超链接文本的显示颜色alink属性：用于设定鼠标移动到超链接上时，超链接文本的显示颜色vlink属性:用于设定访问过的超链接文本的显示颜色background属性:用于设定背景墙纸所用的图像文件，可以是GIF或JPEG文件的绝对路径bgcolor属性:用于设定背景颜色，当已设定墙纸时，这个属性会失去作用，除非墙纸具有透明部分leftmargin属性:用于设定网页显示画面与浏览器窗口左边沿的间隙，单位为像素topmargin属性:用于设 阅读全文
posted @ 2012-03-26 22:29 月月鸟0820 阅读(185) | 评论 (0) 编辑
ibatis学习笔记
摘要: 本节简介:本节主要是对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这个知道点，本节主要是对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插件的使用引入：最近项目中要做一个简单的邮件功能，即从前台输入邮件内容，去配置文件中读取发件人、收件人等信息后，然后发送邮件到指定的邮箱，其中收件人和抄送人可以有多个，基于这个需求，查询了相关资料，决定采用javamail这个插件来实现。preparation：1.JavaMail的介绍 JavaMail，顾名思义，提供给开发者处理电子邮件相关的编程接口。它是Sun发布的用来处理email的API。它可以方便地执行一些常用的邮件传输。 虽然JavaMail是Sun的API之一，但它目前还没有被加在标准的java开发工具包中（Java Develo. 阅读全文
posted @ 2012-03-06 22:46 月月鸟0820 阅读(1173) | 评论 (12) 编辑
作者： Leo_wl
出处： http://www.cnblogs.com/Leo_wl/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。
版权信息