首页 > 代码库 > 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