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():获 ...
随机推荐
- jquery之insertBefore(),insertAfter(),prependTo(),appendTo()用法详解
导航: 1,insertBefore(),insertAfter(),prependTo(),appendTo()这四个函数用法几乎一样 2, 与之相对的有四个函数:Before(),After(), ...
- [HDOJ3709]Balanced Number(数位dp)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3709 题意:求区间[L,R]内每一个数中是否存在一位,使得左边的各位数*距离=右边的各位数*距离(自己 ...
- Singelton单例模式
单例,相当于一个全局变量,在整个应用程序中保证只有一个类的实例存在. 线程池.数据库连接池.缓存.日志等对象常被设计成单例 实例: 1.懒汉式单例 /** * 懒汉式单例Singelton:是一种创建 ...
- \n ^ \t的使用
\n是换行符: 使用时需要放在字符串里面,成为字符串的一部分(不要嫌乱,这是我之前犯的错误). 示例: >>>print("I am Guido \n what's yon ...
- SQL - 批量修改表中所有行数据某字段的部分内容
UPDATE 表名 SET 字段名 = REPLACE (字段名, 'old', 'new');
- Protractor AngularJS测试框架教程
Protractor是一个建立在WebDriverJS基础上的端到端(E2E)的AngularJS JavaScript Web应用程序测试框架.Protractor全自动化真实的模拟用户在真正的浏览 ...
- 你不知道的css中的expression
expression是在IE5版本之后支持使用的,用来把CSS属性和Javascript脚本关联起来,[这里的CSS属性可以是元素固有的属性,也可以是自定义属性.]是动态设置CSS属性的强大方法,但也 ...
- Python跳过第一行读取文件内容
Python编程时,经常需要跳过第一行读取文件内容.比较容易想到是为每行设置一个line_num,然后判断line_num是否为1,如果不等于1,则进行读取操作.相应的Python代码如下: inpu ...
- sp_getTable_data
CREATE PROC sp_Select_Table ) AS begin ) SET @sql='SELECT * FROM ' + @TableName EXEC (@sql) end GO
- 2013 Multi-University Training Contest 1
HDU-4605 Magic Ball Game 题意:给定一颗以1为根的数,每个节点要么有两个孩子节点,要么没有孩子,每个节点有一个重量,现在从节点1往下放置一个小球,根据小球和节点的重量的不同球落 ...