HTML5自学笔记[ 9 ]HTML5实现元素的拖放
要想在html5中实现元素的拖放,被拖放元素就必须设置属性draggable="true";被拖放元素被放置的地方是另外一个元素,该元素是目标元素;这两个元素在拖放过程中都会触发不同的事件,处理好这些事件才可以完成漂亮的拖放。
被拖放元素触发的事件有:
- ondragstart:该事件在鼠标按住元素开始拖动时触发。
- ondragend:该事件在鼠标抬起时触发。
- ondrag:该事件在dragstart和dragend之间连续触发(即使鼠标不移动)。
目标元素触发的事件有:
- ondragenter:该事件在被拖放元素进入到目标元素时触发。
- ondragleave:该事件在被拖放元素离开目标元素时触发。
- ondragover:该事件在被拖放元素进入enter目标元素之后离开leave目标元素之前触发。
- ondrop:该事件在被拖放元素进入目标元素后并抬起鼠标时触发,但是直接不会触发,而必须在阻止了ondragover的默认事件的情况下才能触发。
注意:上述属性和事件只能实现元素的拖拽,不能真正的把元素放在另一个元素里;另外即使完成了上述内容,在火狐下依然不能实现拖拽。
在火狐下使用html5实现元拖放:
- 很简单,只要在ondragstart事件处理函数中,设置event.dataTransfer.setData(key,value);就可以了,参数key和value必须是字符串。
- 其次,dataTransfer的属性setDragImage(oEle,x,y);可以设置拖拽时的阴影是哪个元素。
- 最后,基本上无卵用的属性effectAllowed属性可以来设置鼠标进入目标元素后的样式。
除了页面元素的拖放外,现实中很多情况是本地文件的拖放上传,如邮箱上传附件,此时dataTransfer的强大功能就显现出来了:
- dataTransfer的files属性是一个fileList类型的对象,它是一个类数组对象,在ondrop事件中可以获取,它的作用就是保存拖拽上来的文件。
- 虽然files保存了文件,但是却不能将文件直接上传到服务器,此时我们就要认识一个新朋友:FileReader,这个对象的readAsDataUrl(files[i])方法可以将files中保存的文件读取为二进制形式的字符串,然后再让我们的好朋友ajax将此字符串上传给服务器就可以啦~
来个简单的小练习,外部图片拖拽到网页,显示图片:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>文件拖放(仅限图片)</title> <style> #box { width:300px; height:300px; background:#39C; margin:100px; line-height:300px; text-align:center;} </style> <script> window.onload = function(){ var oDiv = document.getElementById('box'); var oUl = document.getElementById('list'); oDiv.ondragenter = function(){ this.innerHTML = '可以松手了~'; } oDiv.ondragleave = function(){ this.innerHTML = '请将文件拖放到这个区域~'; } oDiv.ondragover = function(ev){ ev = ev || window.event; ev.preventDefault(); } oDiv.ondrop = function(ev){ ev = ev || window.event; ev.preventDefault(); this.innerHTML = '请将文件拖放到这个区域~'; var files = ev.dataTransfer.files; for(var i=0;i<files.length;i++){ if(files[i].type.indexOf('image')==-1){ //不是图片文件就跳过 continue; } var fd = new FileReader(); //每次循环都要新建一个reader fd.readAsDataURL(files[i]); fd.onload = function(){ var oLi = document.createElement('li'); var oImg = document.createElement('img'); oImg.src = this.result; oLi.appendChild(oImg); oUl.appendChild(oLi); } } } } </script> </head> <body> <div id="box">请将文件拖放到这个区域~</div> <ul id="list"></ul> </body> </html>
HTML5自学笔记[ 9 ]HTML5实现元素的拖放的更多相关文章
- html5学习笔记(3)--主题结构元素-1
Article元素 以下为对应代码: <!DOCTYPE html> <html> <head lang="en"> <meta char ...
- [html5] 学习笔记-改良的input元素种类
在html5中,大幅度增加与改良了input元素的种类,可以简单的使用这些元素来实现之前需要JS脚本来实现的功能. 1.url类型.email类型.date类型.time类型.datetime类型.d ...
- [html5] 学习笔记-表单新增元素与属性
本节讲的是表单元素的form,formaction属性,frommethod,formenctype属性,formtarget,autofocus属性,required,labels属性. 1.for ...
- Html5 自学笔记
1 html的全称 Hyper Text Markup Language 2 HTML的意义 使用标记标签( Markup Tag)来描述网页 3 HTML标签一定成对吗 是 4 <html ...
- HTML5自学笔记[ 11 ]canvas绘图基础1
html5新增<canvas>标签用于绘制图像,默认宽高是300*150,canvas的宽高需要在这里设置,在css中设置会有问题:设置的形状,如矩形,会等比缩放,而非设置的宽高. 在不支 ...
- HTML5自学笔记[ 10 ]简单的购物车拖拽
用html5拖拽功能实现了一个简单的购物车,样式简陋,得学学画画提高下审美了T^T: <!doctype html> <html> <head> <meta ...
- HTML5自学笔记[ 18 ]canvas绘图基础5
获取图像数据:getImgData(x,y,w,h),返回的是一个ImageData对象,这个对象有三个属性保存图像信息:width/height/data.data是一个数组,保存了每个像素的信息, ...
- HTML5自学笔记[ 17 ]canvas绘图基础4
绘制图像: drawImage(oImg,x,y),oImg是一个Image对象,(x,y)为绘制起点,绘制的图像大小和源图大小一样. drawImage(oImg,x,y,w,h),后两个参数设置绘 ...
- HTML5自学笔记[ 4 ]js中新增的选择器方法
querySelector():参数与jQuery一样,这个方法获取一组元素中的第一个元素. querySelectorAll():获取一组元素. getElementsByClassName():获 ...
随机推荐
- UVA 1291 十四 Dance Dance Revolution
Dance Dance Revolution Time Limit:3000MS Memory Limit:0KB 64bit IO Format:%lld & %llu Su ...
- SQLServer使用表值参数,高性能批量插入数据
记得前段时间帮同事写了个解析账号并入库的小工具,来批量导入账号信息,账号量相当大,程序每读取一条记录便执行一次insert来插入数据,整整跑了一下午才把账号全部入库. 今天又接到同事类似的需求,不过这 ...
- __declspec(dllexport) & __declspec(dllimport)
__declspec(dllexport) 声明一个导出函数,是说这个函数要从本DLL导出.我要给别人用.一般用于dll中 省掉在DEF文件中手工定义导出哪些函数的一个方法.当然,如果你的DLL里全是 ...
- PHP工作原理
文章一 :http://blog.csdn.net/21aspnet/article/details/6973405 简介 先看看下面这个过程: 我们从未手动开启过PHP的相关进程,它是随着Apach ...
- Reading Csv Files with Text_io in Oracle D2k Forms
Below is the example to read and import comma delimited csv file in oracle forms with D2k_Delimited_ ...
- 用sql的select语句从数据库中获取数据
基本的select语句 select语句中的算数表达式和NULL值 列的别名 使用连接符操作,literal character strings,alternative quote operator, ...
- git学习笔记12-标签管理-版本
发布一个版本时,我们通常先在版本库中打一个标签(tag),这样,就唯一确定了打标签时刻的版本.将来无论什么时候,取某个标签的版本,就是把那个打标签的时刻的历史版本取出来.所以,标签也是版本库的一个快照 ...
- java中类名.class、实例.getclass()区别
import java.util.HashSet; import java.util.Iterator; /** * Created by GOD on 2016/1/23. * Class对象的生成 ...
- 一致性 hash 算法( consistent hashing )
consistent hashing 算法早在 1997 年就在论文 Consistent hashing and random trees 中被提出,目前在cache 系统中应用越来越广泛: 1 基 ...
- 关于ListView嵌套GridView中的onItemClickListener失效问题
一开始在ListView中设置了onItemClickListener,在里面Log输出Item列表的位置,完全没有反应, 网上大部分说的什么把子组件屏蔽掉(而且好多都是转载的一样的), 可是我希望的 ...