html5的新特性——拖放API

在HTML5之前只能使用鼠标事件模拟出“拖放”效果；HTML5专门为拖放提供了7个事件句柄。

被拖动的源对象可以触发的事件：

(1)ondragstart：源对象开始被拖动

(2)ondrag：源对象被拖动过程中(鼠标可能在移动也可能未移动)

(3)ondragend：源对象被拖动结束

拖动源对象可以进入到上方的目标对象可以触发的事件：

(1)ondragenter：目标对象被源对象拖动着进入

(2)ondragover：目标对象被源对象拖动着悬停在上方注意：必须组织dragover事件的默认行为，才可能触发drop事件！ e.preventDefault();

(3)ondragleave：源对象拖动着离开了目标对象

(4)ondrop：源对象拖动着在目标对象上方释放/松手

范例一：被拖动的对象触发的三个事件（dragstartdragdragend）

 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>

范例二：拖动对象去指定目标对象（dragenterdragoverdropdragleave）

 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="+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 = 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>

相关阅读:
h5学习
 python 基础(十五) socket编程
 python 基础(十四) 正则表达式
 python 基础(十三) time模块
 python 基础(十二) 图片简单处理
 python 基础(十一) pickle 序列化
 python 基础(十) 面向对象
 python 基础(九) 文件操作
 python 基础(八) os模块
 python 基础(七) 异常处理
原文地址：https://www.cnblogs.com/samdx/p/6132678.html