4.html5拖拽 - stickout

公告

1. 创建拖拽对象
①给需要拖拽的元素设置draggable属性，它有三个值：
true：元素可以被拖拽；false：元素不能被拖拽；auto：
浏览器自己判断元素是否能被拖拽。
2. 处理拖拽事件
①当我们拖拽对象的时候会触发拖拽事件包括：
A.dragstart：当元素拖拽开始触发；
B.drag：在元素拖拽过程中触发；
C.dragend：元素拖拽结束时触发。

3. 创建投放区
①当拖拽对象进入投放区的时候会触发相关的事件
A.dragenter：当拖拽对象进入投放区时触发；
B.dragover：拖拽对象在投放区内移动时触发；
C.dragleave：拖拽对象没有投放到投放区，离开投放区的
时候触发；
D.drop：拖拽对象投放在投放区时触发。
②注意：dragenter、dragover可能会受到默认事件的影
响，所以我们在这两个事件当中使用
e.preventDefault();来阻止事件默认事件

4. 使用dataTransfer传递数据
1.当我们需要拖拽对象向投放区传递数据的时候用到
dataTransfer有下面的属性和方法：
1.types：返回数据的格式；
2.getData(<format>)：返回指定格式数据；
3.setData(<format>, <data>)：设置指定格式数据；
4.clearData(<format>)：移除指定格式数据；
5.files：返回已经投放的文件的信息数组。
1.type：文件类型
2.size:文件大小
3.name:文件名

html5拖拽异步上传

1.异步ajax
var xml=new XMLHttpRequest();
xml.open("post","url请求地址");
xml.send(formData);
2.表单数据
var formData=new FormData();
formData.append("aa",DataTransferObj);

JS拖拽

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta name="keywords"content=""/>
 5 <meta name="description" content="本篇网页的概述，一段话，对网站的进一步描述"/>
 6 <meta name="author"  content="网页作者的资料">
 7 <meta name="robots" content="" />
 8 <meta http-equiv="Content－Type" content="text/html; charset=gb2312">
 9 <title>无标题文档</title>
10 <style>
11  #one{
12   width:100px;height:100px;background:red;position:absolute;
13  }
14 </style>
15 <script>
16   window.onload=function  () {
17    var one=document.getElementById("one");
18    one.onmousedown=function  () {
19     document.onmousemove=function  (e) {
20       one.style.left=e.clientX+"px";
21       one.style.top=e.clientY+"px";
22     }
23    }
24   }
25 </script>
26 </head>
27 
28 <body>
29 <div id="one">
30 </div>
31 </body>
32 </html>

HTML

html5拖拽

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta name="keywords"content=""/>
 5 <meta name="description" content="本篇网页的概述，一段话，对网站的进一步描述"/>
 6 <meta name="author"  content="网页作者的资料">
 7 <meta name="robots" content="" />
 8 <meta http-equiv="Content－Type" content="text/html; charset=gb2312">
 9 <title>无标题文档</title>
10 <style>
11  #one{
12   width:200px;height:200px;border:1px solid red;
13  }
14  #two{
15   width:100px;height:100px;border:1px solid blue;
16  }
17 </style>
18 <script>
19   window.onload=function  () {
20    var one=document.getElementById("one");
21    var two=document.getElementById("two");
22 
23    //拖拽物体的事件
24    two.ondragstart=function  (e) {
25      e.dataTransfer.setData("Text","图库林");
26      one.innerHTML="开始";
27    }
28     two.ondrag=function  () {
29     // one.innerHTML+="移动";
30    }
31    two.ondragend=function  () {
32      one.innerHTML+="完成";
33    }
34 
35   //投放区的事件
36   one.ondragenter=function  (e) {
37     one.innerHTML+="进入";
38     e.preventDefault();
39   }
40 
41    one.ondragover=function  (e) {
42     //one.innerHTML+="移动";
43     e.preventDefault();
44   }
45   one.ondragleave=function  (e) {
46     one.innerHTML+="离开";
47     e.preventDefault();
48   }
49   one.ondrop=function  (e) {
50     e.preventDefault();
51     alert(e.dataTransfer.getData("Text"))
52     one.appendChild(two);
53   }
54   }
55 </script>
56 </head>
57 
58 <body>
59 <div id="one">
60 </div>
61 <div id="two" draggable=true>
62   请拖拽我
63 </div>
64 </body>
65 </html>

html5

html拖拽简单实例

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta name="keywords"content=""/>
 5 <meta name="description" content="本篇网页的概述，一段话，对网站的进一步描述"/>
 6 <meta name="author"  content="网页作者的资料">
 7 <meta name="robots" content="" />
 8 <meta http-equiv="Content－Type" content="text/html; charset=gb2312">
 9 <title>无标题文档</title>
10 <style>
11  #box{
12   width:200px;height:200px;border:1px solid red;
13  }
14  #con{
15  width:200px;height:200px;border:1px solid blue;list-style:none;padding:0;margin:0;
16  }
17  li{
18    width:150px;height:30px;margin:5px 0;background:#ccc;line-height:30px;text-align:center;
19 list-style:none;
20  }
21 </style>
22 <script>
23   window.onload=function  () {
24    var box=document.getElementById("box");
25    var con=document.getElementById("con");
26    var lis=document.getElementsByTagName("li");
27    for (var i=0; i<lis.length; i++) {
28     lis[i].draggable=true;
29     lis[i].flag=false;
30     lis[i].ondragstart=function  () {
31      this.flag=true;
32     }
33     lis[i].ondragend=function  () {
34      this.flag=false;
35     }
36    }
37 
38    box.ondragenter=function  (e) {
39      e.preventDefault();
40    }
41    box.ondragover=function  (e) {
42      e.preventDefault();
43    }
44    box.ondragleave=function  (e) {
45      e.preventDefault();
46    }
47    box.ondrop=function  (e) {
48      for (var i=0; i<lis.length; i++) {
49        if(lis[i].flag){
50          box.appendChild(lis[i]);
51        }
52      }
53      e.preventDefault();
54    }
55 
56 
57   con.ondragenter=function  (e) {
58      e.preventDefault();
59    }
60    con.ondragover=function  (e) {
61      e.preventDefault();
62    }
63    con.ondragleave=function  (e) {
64      e.preventDefault();
65    }
66    con.ondrop=function  (e) {
67      for (var i=0; i<lis.length; i++) {
68        if(lis[i].flag){
69          con.appendChild(lis[i]);
70        }
71      }
72      e.preventDefault();
73    }
74   }
75 </script>
76 </head>
77 
78 <body>
79 <div id="box">
80 </div>
81 <ul id="con">
82     <li>图库林php</li>
83     <li>图库林js</li>
84     <li>图库林html5</li>
85     <li>图库林css3</li>
86 </ul>
87 </body>
88 </html>

html5

html5拖拽异步上传文件

 1 <!DOCTYPE HTML>
 2 <html>
 3     <head>
 4         <style>
 5          #box{
 6          width:150px;height:150px;border:1px dashed red;
 7          font-size:13px;line-height:150px;text-align:center;
 8          }
 9         </style>
10         <script>
11          window.onload=function  () {
12           var box=document.getElementById("box");
13           box.ondragenter=function  (e) {
14           e.preventDefault()
15           }
16           box.ondragover=function  (e) {
17           box.innerHTML="请松开"
18            e.preventDefault()
19           }
20           box.ondragleave=function  (e) {
21            box.innerHTML="请拖入上传的文件"
22           e.preventDefault()
23           }
24           box.ondrop=function  (e) {
25           var file=e.dataTransfer.files[0];
26           var formData=new FormData(); 
27            formData.append("aa",file);
28           var xml=new XMLHttpRequest();
29           xml.open("post","url请求地址");
30           xml.send(formData);
31            e.preventDefault()
32           }
33          }
34         </script>
35     </head>
36     <body>
37        <div id="box">
38          请拖入上传的文件
39        </div>
40     </body>
41 </html>

html5

posted on 2014-05-25 21:53 stickout 阅读(270) 评论(0) 编辑收藏举报

刷新页面返回顶部