首页 > 代码库 > HTML5新增的一些属性和功能之六——拖拽事件

HTML5新增的一些属性和功能之六——拖拽事件

2024-08-22 09:34:52   244人阅读

　拖放事件的前提是分为源对象和目标对象，你鼠标拖着的是源对象，你要放置的位置是目标对象，区分这两个对象是因为HTML5的拖放事件对两者是不同的。

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

         1).ondragstart:源对象开始被拖动

         2).ondrag:源对象被拖动过程中（鼠标可能移动也可能不移动）

         3).ondragend:源对象被拖动结束

 

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

         1).ondragenter:目标对象被源对象拖动着进入

         2).ondragover:目标对象被源对象拖动着悬停在上方

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

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

 

         注意：1.必须阻止dragover事件的默认行为e.preventDefault，才可能触发drop事件！　

1 box.ondragover = function(e){
2 e.preventDefault(); //使得drop事件可以触发
3     }
4 box.ondrop = function(e){
5     do something...
6     }

                   2.要使用jQuery的话，一定要记住e不是原始的event事件，而是jQuery的事件，这时候需要使用e.originalEvent.dataTransfer

 

拓展：HTML5新增的文件操作对象

File：代表一个文件对象|”

FileList:代表一个文件列表对象，类数组

FileReader:从文件中读取数据

FileWriter：向文件中写入数据

　　　　

有了文件操作对象，可以直接拖动客户端文件到服务器下载的页面中。

div.ondrop=function(e){
    var f=e.dataTransfer.files[0];//文件对象 File
    varfr=new FileReader();//从文件对象中读取数据
    fr.readAsDataURL(f);//从文件中读取URL数据
        fr.onload=function(){
        img.src=fr.result;
        }
}

完整代码如下：

技术分享 
 1 //例：用户拖动图片到服务器上
 2 <!DOCTYPE html>
 3 <html>
 4 <head lang="en">
 5 <meta charset="UTF-8">
 6 <title></title>
 7 <style>
 8     #container {
 9         border: 1px solid #aaa;
10         border-radius: 3px;
11         padding: 10px;
12         margin: 10px;
13         min-height: 400px;
14     }
15 </style>
16 </head>
17 <body>
18     <h1>拖放API的扩展知识</h1>
19     <h3>请拖动您的照片到下方方框区域</h3>
20     <div id="container">
21 
22     </div>
23 
24     <script>
25         //监听document的drop事件——取消其默认行为：在新窗口中打开图片
26        document.ondragover = function(e){
27             e.preventDefault(); //使得drop事件可以触发
28         }
29         document.ondrop = function(e){
30             e.preventDefault(); //阻止在新窗口中打开图片
31         }
32 
33         //监听div#container的drop事件，设法读取到释放的图片数据，显示出来
34         container.ondragover = function(e){
35             e.preventDefault();
36         }
37         container.ondrop = function(e){
38           console.log(‘客户端拖动着一张图片释放了...‘)
39           //当前的目标对象读取拖放源对象存储的数据
40           //console.log(e.dataTransfer); //显示有问题
41           //console.log(e.dataTransfer.files.length); //拖进来的图片的数量
42             var f0 = e.dataTransfer.files[0];
43           //console.log(f0); //文件对象 File
44 
45           //从文件对象中读取数据
46         var fr = new FileReader();
47           //fr.readAsText(f0); //从文件中读取文本字符串
48         fr.readAsDataURL(f0); //从文件中读取URL数据
49         fr.onload = function(){
50         console.log(‘读取文件完成‘)
51         console.log(fr.result);
52         varimg = new Image();
53         img.src = http://www.mamicode.com/fr.result; //URL数据
54         container.appendChild(img);
55       }
56     }
57 
58     </script>
59 </body>
60 </html>
61
drag

 

HTML5新增的一些属性和功能之六——拖拽事件


联系
我们