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>

 

posted @ 2016-07-08 21:10  笑花大王  阅读(306)  评论(0编辑  收藏  举报