html5 拖放事件

时间：2016-06-06 10:24:01 收藏：0 阅读：3305

1、设置元素可拖拽属性:draggable

true表示可拖拽。
false表示不可拖拽。
auto默认值，img和带href属性的a标签则表示可拖拽，其他标签表示不可被拖拽。
其他值表示不可拖拽。
兼容FF：需要在ondragstart事件中设置ev.dataTransfer.setData("",""),元素才可以被拖拽。

2、拖拽元素事件：

dragstart：拖拽前触发，即鼠标按下，被拖拽元素被拖拽的瞬间触发。
- event.dataTransfer的大部分设置均在这里配置
- 若调用event.preventDefault()则会阻止拖拽行为，导致后续的拖拽事件不被触发
- 触发dragstart事件后，其他元素的mousemove,mouseover,mouseenter,mouseleave,mouseout事件均不会被触发了
drag：拖拽前、拖拽结束之间连续触发，即使鼠标没有移动，只要未释放，都会触发。
dragend:拖拽结束触发，即释放鼠标触发。

3、目标元素事件：

dragenter：进入目标元素触发，相当于mouseover
dragover：被拖拽元素在目标元素上移动时触发，相当于mousemove
- 可以在这里设置dropEffect的值，事件的默认行为是将dropEffect设置为none
- 该事件是被拖拽元素在目标元素上移动一段时间后才触发
- 事件的默认行为是不允许被拖拽元素在其他元素上释放或放置（即无法触发 drop 事件），需要通过 event.preventDefault() 来阻止默认行为才能触发后续的 drop 事件。
dragleave：被拖拽元素离开目标元素时触发
drop：被拖拽元素放置在目标元素上时触发（释放鼠标）
- 对于外来的被拖拽元素（超链接、文件、图片源）， drop 事件的默认行为是浏览器将当前页面重定向到被拖拽元素所指向的资源上
- 对文档内部的被拖拽元素，IE10+和Chrome下的默认行为是不作为，而FF得默认行为是新打开一个文档用于访问被拖拽元素所指向的资源

4、事件执行顺序：

drop不触发的时候：dragstart > drag > dragenter > dragover > dragleave > dragend
drop触发的时候（dragover阻止了默认事件）：dragstart > drag > dragenter > dragover > drop > dragend

5、dataTransfer对象：

[object DragEvent]对象：继承自[object MouseEvent]对象，其实就多了一个dataTransfer属性。
[object DataTransfer]对象详解：传递数据，数据类型为字符串和文件类型。
effectAllowed和dropEffect属性。（http://www.cnblogs.com/fsjohnhuang/p/3961066.html#t8）

6、其他属性：

items:数据类型为DataTransferItemList，存储DataTransfer对象中所有的数据项。
files:数据类型为FileList（IE5~9没有该属性）。
types:数据类型为DOMStringList，存储DataTransfer对象中所有数据项的数据类型。

7、方法：

addElement():添加一起跟随鼠标移动的元素。仅在 dragstart 事件中调用。
setDragImage(image,x,y):设置拖动时跟随鼠标移动的图片，用来替代默认的元素，若image不是图片元素则会元素临时转换为图片；x用于设置图标与鼠标在水平方向上的距离，y设置图标与鼠标在垂直方向上的距离。仅在 dragstart 事件中调用。IE10+不支持该方法；

示例：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>模拟回收站</title>
 6         <style type="text/css">
 7             li{
 8                 list-style: none;width:100px; height:25px; line-height: 25px; background:#ccc; margin:5px; text-align: center;
 9             }
10             #recycle{
11                 width:200px; height:100px; background:red; position: absolute; top:200px;
12             }
13         </style>
14     </head>
15     <body>
16         <ul id="list">
17             <li draggable="true">图标1</li>
18             <li draggable="true">图标2</li>
19             <li draggable="true">图标3</li>
20         </ul>
21         <div id="recycle"></div>
22     </body>
23 </html>
24 <script>
25     window.onload = function(){
26         var oList = document.getElementById("list");
27         var aLi = oList.getElementsByTagName("li");
28         var oRecycle = document.getElementById("recycle");
29         
30         var flag = false; //标示是否把图标放入到回收站
31         for(var i = 0 ; i<aLi.length;i++){
32             aLi[i].index = i;
33             aLi[i].ondragstart = function(ev){
34                 ev = ev || window.event;
35                 ev.dataTransfer.setData("index",this.index);
36                 
37                 ev.dataTransfer.setDragImage(getImg(),0,0);
38             }
39             aLi[i].ondragend = function(ev){
40                 flag && oList.removeChild(this);
41             }
42         }
43         
44         oRecycle.ondragover = function(ev){
45             ev.preventDefault();
46         }
47         oRecycle.ondrop = function(ev){
48             var index =  ev.dataTransfer.getData("index");
49             this.appendChild(getLiByIndex(index));
50             flag = true;
51         }
52         
53         function getImg(){
54             var oImg = document.createElement("img");
55             oImg.src = "img/111.png";
56             return oImg;
57         }
58         
59         function getLiByIndex(index){
60             for(var i = 0 ;i < aLi.length;i++){
61                 if(aLi[i].index == index) return aLi[i];
62             }
63         }
64     }
65 </script>

模拟回收站