拖放事件的前提是分为源对象和目标对象，你鼠标拖着的是源对象，你要放置的位置是目标对象，区分这两个对象是因为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 = fr.result; //URL数据
54 container.appendChild(img);
55 }
56 }
57
58 </script>
59 </body>
60 </html>
61
drag
时间： 2024-12-10 05:37:55