HTML5 DragAPI

最新推荐文章于 2024-05-10 11:08:56 发布

dingxia6839

最新推荐文章于 2024-05-10 11:08:56 发布

阅读量128

点赞数

原文链接：http://www.cnblogs.com/MrBackKom/archive/2012/03/21/2409364.html

版权

在提出dragAPI之前，我们可以通过鼠标事件以及事件目标来实现拖动或与拖动相关的数据处理。

一、实现拖放

　　首先将要拖放的元素的draggable属性设为true(draggable = 'true')，另外，img 和 a 元素(必须指定 href)的draggable属性默认就是true。

　　其次关于拖放存在以下几个事件

事件	产生事件的元素	描述
dragstart	被拖放的元素	开始拖放操作
drag	被拖放的元素	拖放过程中
dragenter	拖放过程中鼠标经过的元素	被拖放的元素开始进入本元素的范围内
dragover	拖放过程中鼠标经过的元素	被拖放的元素正在本元素范围内移动
dragleave	拖放构成中鼠标经过的元素	拖放的元素离开本元素的范围
drop	拖放的目标元素	有其他元素被拖放到本元素中
dragend	拖放的对象元素	拖放操作结束

　　我们现在举个例子，实现的需求是，界面上有两个div（dragee，dragrec），如果我们把dragee拖放到dragrec中记录被拖放的次数。

　　实现过程如下，（PS：请在chrome中执行，因为ff不支持preventDefault方法等，课更改returnvalue来兼容ff）

 1 <!DOCTYPE html>
 2 <html lang="en">
 3     <head>
 4         <meta charset="utf-8" />
 5         <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
 6         Remove this if you use the .htaccess -->
 7         <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
 8         <title>dragAPI</title>
 9         <meta name="description" content="" />
10         <meta name="viewport" content="width=device-width; initial-scale=1.0" />
11         <!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
12         <link rel="shortcut icon" href="/favicon.ico" />
13         <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
14         <script >
15　　　　　　 function init(){
16 　　　　　　　　var dragme = document.getElementById('dragee');
17 　　　　　　　　var dragRec = document.getElementById('drager');
18 　　　　　　　　var i = 0;;
19                 
20               dragme.addEventListener('dragstart',function(e){
21 　　　　　　　　　　var dt = e.dataTransfer;//datatransfer 表示拖放时要携带的数据
22               　　dt.effectAllowed = 'all';
23 　　　　　　　　　　//effectAllowed: copy, link, move, copyLink, copyMove, all, none & uninitialized
24 　　　　　　　　　　//effectAllowed表示携带数据能允许 拖放的操作类型。
25                  i++;                   
26                  dt.setData('text/plain',"你好,我被拖放了"+ i+"次<br/>");                    
27               },false);  
28               dragRec.addEventListener('dragend',function(e){
29                     e.preventDefault();
30                 },false);                                  
31                 
32                 dragRec.addEventListener('drop',function(e){
33　　　　　　　　　　　　 var dt = e.dataTransfer;
34 　　　　　　　　　　　　var text = dt.getData('text/plain');
35 　　　　　　　　　　　　if(i==1){
36                         dragRec.innerHTML = "";
37                     }
38                     dragRec.innerHTML += text;
39                     e.preventDefault();
40                     e.stopPropagation(); 
41                 },false);
42                }
43                 document.ondragover = function(e){e.preventDefault();};
44                 document.ondrop = function(e){e.preventDefault();};
45 　　　　　　</script>
46     </head>
47     <body onload="init()">
48         <div id='dragee' draggable="true" style="width: 200px;height:30px;border: 1px solid blue ">请托我</div>
49         <div id='drager' style="width: 200px;height: 500px;border: 1px solid red">拖到我身上</div>
50     </body>
51 </html>

　　值得注意的几件事：

　　首先：针对要拖放的目标元素，必须在dragend或者dragover事件中调用"e.preventDefault()"，因为在默认情况下，拖放的目标元素是不允许接受元素的，为了把元素拖放到其中，必须把默认方法关掉，还有就是setData和getData方法的参数需要注意一下。

　　目前拖放API所支持的MIME类型包括：

　　text/plain 文本文字

　　text/html HTML文字

　　text/xml XML文字

　　text/uri-list URL列表，每个URL为一行。

　　其次：让我们来跟调一下，特别关注一下dataTransfer属性，请看下图，

　　我们可以看见dataTransfer对象的原型链中，_proto_指向的是Clipboard,constructor指向的是 function Clipboard(){}函数，我们可以认为dataTransfer继承了clipboard，因此也会拥有clipboard的公共方法，所以我们还可以针对这个原理做点其他的事情...

转载于:https://www.cnblogs.com/MrBackKom/archive/2012/03/21/2409364.html

dingxia6839

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5 DragAPI

在提出dragAPI之前，我们可以通过鼠标事件以及事件目标来实现拖动或与拖动相关的数据处理。一、实现拖放　　首先将要拖放的元素的draggable属性设为true(draggable = 'true')，另外，img 和 a 元素(必须指定 href)的draggable属性默认就是true。　　其次关于拖放存在以下几个事件事件产生事件的元素描述...
复制链接

扫一扫