HTML5拖放API

拖放

拖放是一种常见的特性，即抓取对象以后拖到另一个位置。

在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放。

浏览器支持

Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。

注释：在 Safari 5.1.2 中不支持拖放。

拖放步骤

1、对象元素的draggable属性设置为true（draggable="true"）。还需要注意的是a元素和img元素必须指定href。
dragstart 被拖放的元素开始拖放操作
drag 被拖放的元素拖放过程中
dragenter 拖放过程中鼠标经过的元素被拖放的元素开始进入本元素的范围之内
dragover 拖放过程中鼠标经过的元素被拖放的元素正在本元素范围内移动
dragleave 拖放过程中鼠标经过的元素被拖放的元素离开本元素的范围
drop 拖放的目标元素其他元素被拖放到了本元素中
dragend 拖放的对象元素拖放操作结束

DataTransfer对象的属性和方法
属性/方法描述
dropEffect属性表示拖放操作的视觉效果，允许设置其值，这个效果必须用在effectAllowed属性指定的允许的视觉效果的范围内，允许指定的值none、copy、link、move
effectAllowed属性用来指定当元素被拖放时所允许的视觉效果，可以指定的值copy、link 、move、copylink 、linkmove、all、none、uninitialized
types属性存入数据的种类，字符串的伪数组
void clearData（DOMString format）方法清除DataTransfer对象中存放的数据，如果省略掉参数format就会清除全部数据。
void steData（DOMString format，DOMStrong data）向DataTransfer对象中存入数据
DOMString getData(DOMString format) 从DataTransfer对象中读取数据
void setDragImage(Element image，long x，long y) 用img元素来设置拖放图标
clearData方法可以用于清除DataTransfer对象中的数据。

拖放时的效果

个元素被拖放时所允许的视觉效果，一般在ondragstart事件中设定，他的值如下：
属性值说明
copy 允许被拖动的元素被复制到项目中
move 允许将被拖动元素移动到被拖动的目标元素中
link 通过拖放操作，被拖动的元素会连接到拖到的目标元素上
copylink 被拖动元素被复制或链接到拖动的目标元素中，根据拖动的目标元素来决定执行复制操作还是链接操作
copyMove 被拖动元素复制或移动到拖到的目标元素中，根据被拖动的目标元素来决定复制操作还是移动操作
linkmove 被拖动元素被连接或移动到拖动的目标元素中，根据拖动的目标元素来决定执行链接操作还是移动操作
all 允许执行所有拖动操作
none 不允许执行任何拖动操作
uninyialize 不指定effectAllowed属性值。这是将执行浏览器中默认允许的拖动操作，但是这个操作不能通过effectAllowed属性值来获取
dropEffect属性表示实际拖放时的视觉效果，一般在ondragover事件中指定，允许的值none、copy、link、move。

======================================================、

拖放案例代码

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title>HTML5-拖放</title> 
 6 <style>
 7       #tuo{
 8                 background: #e54d26;
 9                 width: 200px;
10                 height: 120px;
11                 text-align:center;
12                 font-size:18px;
13                 line-height:120px;
14             }
15         #cun{
16             width: 200px;
17             height: 120px;
18             border: 2px solid #D2D2D2;
19             box-shadow: 1px 4px 8px #646464;
20 
21         }
22 </style>
23 <!-- 
24 <script type="text/javascript" src="1.js"></script> -->
25 <script>
26 
27 function allowDrop(ev){
28     ev.preventDefault();
29     ev.dataTranser.dropEffect='move';
30 }
31 function drag(ev){
32 
33     //拖放时允许的视觉效果
34      ev.effeAllowed='link';
35      //存储
36      ev.dataTransfer.setData("Text",ev.target.id);
37 }
38 
39 function drop(ev){
40      //不执行默认处理（拒绝被拖放）
41             ev.preventDefault();
42             //使用getData()获取到数据，然后赋值给data
43             var data=ev.dataTransfer.getData("Text");
44             //使用appendChild方法把拖动的节点放到元素节点中成为他的子节点
45             ev.target.appendChild(document.getElementById(data));
46 }
47 </script>
48 <body>
49 <div id="cun" ondrop='drop(event)' ondragover="allowDrop(event)"></div>
50 <br/>
51 <div id="tuo" draggable="true" ondragstart="drag(event)"  width="500" height="280">我是被拖拽的笑花大叔</div>
52 
53 </body>
54 </html>