首页 > 代码库 > html5的新特性——拖放API
html5的新特性——拖放API
在HTML5之前只能使用鼠标事件模拟出“拖放”效果；HTML5专门为拖放提供了7个事件句柄。
被拖动的源对象可以触发的事件：
(1)ondragstart：源对象开始被拖动
(2)ondrag：源对象被拖动过程中(鼠标可能在移动也可能未移动)
(3)ondragend：源对象被拖动结束
拖动源对象可以进入到上方的目标对象可以触发的事件：
(1)ondragenter：目标对象被源对象拖动着进入
(2)ondragover：目标对象被源对象拖动着悬停在上方 注意：必须组织dragover事件的默认行为，才可能触发drop事件！ e.preventDefault();
(3)ondragleave：源对象拖动着离开了目标对象
(4)ondrop：源对象拖动着在目标对象上方释放/松手
范例一：被拖动的对象触发的三个事件（dragstart\drag\dragend）
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <img src="img/1.jpg" id="i1"/> 9 <script> 10 var i1=document.getElementById(‘i1‘); 11 i1.addEventListener(‘dragstart‘,function(){ 12 console.log(‘你拖动了....‘); 13 }); 14 i1.addEventListener(‘drag‘,function(){ 15 console.log(‘你正在拖动....‘); 16 }); 17 i1.addEventListener(‘dragend‘,function(){ 18 console.log(‘你结束了拖动....‘); 19 }); 20 </script> 21 </body> 22 </html>
范例二：拖动对象去指定目标对象（dragenter\dragover\drop\dragleave）
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 #d1{ 8 width: 200px; 9 height: 200px; 10 border: 1px solid #555555; 11 margin:auto; 12 } 13 </style> 14 </head> 15 <body> 16 <img src="img/1.jpg" id="i1"/> 17 <div id="d1"></div> 18 <script> 19 var d1=document.getElementById(‘d1‘); 20 d1.addEventListener(‘dragenter‘,function(){ 21 console.log(‘你将图片拖进目标对象....‘); 22 }); 23 d1.addEventListener(‘dragover‘,function(e){ 24 //在拖动对象悬停在目标对象时，我们阻止阻止浏览器的默认行为 25 //才能触发drop 释放事件 26 e.preventDefault(); 27 console.log(‘你将图片悬停在目标对象上....‘); 28 }); 29 d1.addEventListener(‘drop‘,function(){ 30 console.log(‘你放下了图片....‘); 31 }); 32 d1.addEventListener(‘dragleave‘,function(){ 33 console.log(‘你拖出了图片....‘); 34 }); 35 </script> 36 </body> 37 </html>
三、如何在拖动的源对象事件和目标对象事件间传递数据？
HTML5为所有的拖动相关事件提供了一个新的属性：e.dataTransfer 用于在源对象和目标对象的事件间传递数据。
源对象上的事件处理中保存数据：
e.dataTransfer.setData( k, v ); //k-v必须都是string
目标对象上的事件处理中读取数据：
var v = e.dataTransfer.getData( k );
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 body{ 8 text-align: center; 9 } 10 #d1{ 11 width: 100px; 12 height: 100px; 13 border: 1px solid #555555; 14 margin:auto; 15 } 16 </style> 17 </head> 18 <body> 19 <div id="d1">拖进来就删除</div> 20 <br/><br/><br/><br/> 21 <img src="img/1.jpg" class="res"/> 22 <img src="img/2.jpg" class="res"/> 23 <img src="img/3.jpg" class="res"/> 24 <img src="img/4.jpg" class="res"/> 25 <script> 26 //获取所有的图片对象 27 var imglist=document.querySelectorAll(‘.res‘); 28 for(var key in imglist){ 29 //为每个图片绑定 "开始拖动"动作的 监听 30 //注意这时的拖动事件有个对象 e.dataTransfer 31 imglist[key].ondragstart=function(e){ 32 console.log(e.dataTransfer); 33 /**e.dataTransfer对象属性 34 * 35 *files：获取对应文件列表 36 *items：获取对应元素列表 37 * types： 38 * 39 * 方法： 40 * setData(type,data) 41 * 参数 42 * type-设置当前数据的类型（标识——唯一） 43 * data-向dataTransfer对象设置的数据内容 44 * 作用——向dataTransfer对象存储数据 45 * 46 * getData(type) 47 * 参数 48 * type-设置当前数据的类型（标识——唯一） 49 *作用-从dataTransfer对象获取指定数据 50 * 51 *clearData() 52 * 作用-清空dataTransfer对象中所有存储的内容 53 * 54 * */ 55 } 56 } 57 </script> 58 </body> 59 </html>
e.dataTransfer控制台显示：三个属性 三个主要方法
e.dataTransfer.setData(‘‘,‘‘); e.dataTransfer.getData(‘‘,‘‘); 的拖动
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 body{ 8 text-align: center; 9 } 10 #d1{ 11 width: 100px; 12 height: 100px; 13 border: 1px solid #555555; 14 margin:auto; 15 } 16 </style> 17 </head> 18 <body> 19 <div id="d1"></div> 20 <br/><br/><br/><br/> 21 <img src="img/1.jpg" class="res"/> 22 <img src="img/2.jpg" class="res"/> 23 <img src="img/3.jpg" class="res"/> 24 <img src="img/4.jpg" class="res"/> 25 <script> 26 //获取所有的图片对象 27 var imglist=document.querySelectorAll(‘.res‘); 28 for(var key in imglist){ 29 //为每个图片绑定 "开始拖动"动作的 监听 30 //注意这时的拖动事件有个对象 e.dataTransfer 31 imglist[key].ondragstart=function(e){ 32 console.log(e.dataTransfer); 33 //向dataTransfer对象存储数据 34 e.dataTransfer.setData(‘image/png‘,this.src); 35 } 36 } 37 var d1=document.getElementById(‘d1‘); 38 //之前提过只有 dragover事件，里面设置了 e.preventDefault();才能触发drop事件 39 d1.ondragover=function(e){ 40 e.preventDefault(); 41 } 42 d1.ondrop=function(e){ 43 var src=e.dataTransfer.getData(‘image/png‘); 44 console.log(src); //这里得到的是一个 http://localhost:63342/HTML_DAY05/img/1.jpg 字符串 45 var kw=src.match(/(img\/){1}\d{1}(.jpg)/g); //所以进行正则 得到 我们需要的字符串 46 console.log(kw); 47 /* 48 这里可以 用‘+’拼接 得到需要的字符串 后使用dom 查找到准确的图片对象 将其 拼接到 目标对象 ‘d1’下 49 kw="‘"+kw+"‘"; 50 var img=document.querySelector("[src="http://www.mamicode.com/+kw+"]"); 51 */ 52 //这里 也可以用 `` 这个来书写 选择器 属于js特有的符号 但是引用变量时 要 ${}括起来 53 var img=document.querySelector(`[src="${kw}"]`); 54 this.appendChild(img); 55 56 //如此 就可以出现真正拖动 效果 了。 57 58 } 59 </script> 60 </body> 61 </html>
效果图:
四.如何去实现拖拽文件进入一个网页。
提问：实现在网页中将客户端的图片移入网页中显示？
这里我们(不进行任何操作)直接拖入图片进入网页，会怎么显示呢？
解一：这里直接拖到网页的图片会在一个新打开的网页上显示，并不会出现在我们想要它出现的位置上。
我们知道ondragover的只有阻止默认浏览器行为e.preventDefault();才能触发ondrop事件。
所以我们想要从客户端上拖放图片到网页上我们指定的区域，也需要在网页上进行drop事件时取消浏览器的默认行为。
解二：如何让浏览器读取到我们的文件内容。
div.ondrop = function(e){
var f = e.dataTransfer.files[0]; //找到拖放的文件
var fr = new FileReader(); //创建文件读取器
fr.readAsURLData(f); //读取文件内容
fr.onload = function(){ //读取完成
img.src = http://www.mamicode.com/fr.result; //使用读取到的数据
}
}
这里同样有个知识点：
HTML5新增的文件操作对象：
File： 代表一个文件对象
FileList： 代表一个文件列表对象，类数组
FileReader：用于从文件中读取数据
FileWriter：用于向文件中写出数据
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 #container{ 8 border:1px solid #aaa; 9 padding:10px; 10 margin:10px; 11 width: 500px; 12 height:500px; 13 } 14 </style> 15 </head> 16 <body> 17 <h3>拖放API的扩展知识——将本地文件拖到html页面上</h3> 18 <h3>请拖动您的照片到下方方框区域</h3> 19 <div id="container"></div> 20 <script> 21 document.ondragover=function(e){ 22 e.preventDefault(); 23 } 24 document.ondrop=function(e){ 25 e.preventDefault();//在新窗口打开图片 26 } 27 //监听div.container的drop事件，设法读取到释放的图片 28 29 container.ondragover=function(e){ 30 console.log(this); 31 e.preventDefault(); 32 } 33 container.ondrop=function(e){ 34 console.log(‘释放了.‘); 35 //当前的目标对象读取拖放源对象存储的数据 36 // console.log(e.dataTransfer); //显示有问题 37 // console.log(e.dataTransfer.files.length); //拖进来的图片数量 38 39 var f0= e.dataTransfer.files[0]; //文件对象 40 // console.log(f0); 41 var fr=new FileReader(); //创建文件读取器 42 // fr.readAsText(f0); //从文件中读取文本字符串 43 fr.readAsDataURL(f0); //从文件中读取url数据 44 fr.onload=function(){ 45 console.log(‘读取文件完成‘); 46 console.log(fr.result); 47 var img=new Image(); 48 img.src=fr.result; 49 container.appendChild(img); 50 } 51 } 52 </script> 53 </body> 54 </html>
html5的新特性——拖放API