draggable属性和dataTransfer对象

最新推荐文章于 2024-06-23 09:43:45 发布

洛小宇

最新推荐文章于 2024-06-23 09:43:45 发布

阅读量1.4k

点赞数

文章标签： html5 拖放操作

本文介绍HTML5中拖放API的基本用法，包括如何使元素可拖动、如何设置拖动时携带的数据、如何取消浏览器默认行为以及如何利用DataTransfer对象进行数据交换等，并通过一个具体的案例展示了如何实现拖拽添加和删除的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先说下HTML5里新增的draggable属性

在Html5中，默认<img.../>和设置了href的<a>是可拖动的，其他都需手动把元素的draggable属性设置为true

然后使元素携带数据应该为被拖动元素的ondragstart（开始拖动触发该事件）事件指定监听器，在监听器中让拖动操作可以携带数据。

之后为了让document接受放的动作，为documen的ondragover事件设定监听器，在监听器中取消document对拖动事件的默认行为。

然而，不同浏览器在元素拖到指定位置释放之后默认的动作是不同的（firefox释放后会跳转到新页面，chrome则没有任何动作），所以

我们要取消拖放操作的默认动作，为document的ondrop绑定监听器

例如，一个允许自由拖动的div:

[html]view plaincopy 
   
 <span style="font-family:Microsoft YaHei;font-size:12px;"><!DOCTYPE HTML>  
 <html>  
 <head>  
 <meta http-equiv="Content-Type" content="text/html" charset="utf-8"/>  
 <title>可拖动</title>  
 <style type="text/css">  
 #source{  
     border: 1px solid #000000;  
     background-color: #ccc;  
     width: 80px;  
     height: 80px;  
 }  
 </style>  
   
 </head>  
 <body>  
 <div id="source">  
 HELLO WORLD。  
 </div>  
 <script type="text/javascript">  
     var source = document.getElementById("source");  
     source.ondragstart = function(evt){  
         //让拖动携带数据  
         evt.dataTransfer.setData("text/plain","www.fkjava.org");  
     }  
     document.ondragover = function(evt){  
         //取消事件的默认行为  
         return false;  
     }  
     document.ondrop = function(evt){  
         source.style.position = "absolute";  
         source.style.left = evt.pageX + "px";  
         source.style.top = evt.pageY + "px";  
         //取消事件的默认行为  
         return false;  
     }  
 </script>  
 </body>  
 </html>  
 </span>  

附：触发事件

ondragstart：开始拖动时触发
ondrag：拖动过程中不断触发
ondragend：拖动结束时触发
ondragenter：被拖动元素进入本元素的范围内时触发
ondragover：被拖动元素进入本元素的范围内拖动时不断触发
ondragleave：被拖动元素离开本元素时触发
ondrop：其他元素被放到了本元素时触发

再来说下DataTransfer对象

拖放触发的拖放事件有一个dataTransfer的属性，该属性值是一个DataTransfer对象

对象属性:
- dataTransfer.dropEffect:设置或返回拖放目标上允许发生的拖放行为。如果此处设置的拖放行为不再effectAllowed属性设置的多种拖放行为之内，拖放操作将会失败。该属性值只允许为“null”、“copy”、“link”和“move”四值之一。
- dataTransfer.effectAllowed:设置或返回被拖动元素允许发生的拖动行为。该属性值可设为“none”、“copy”、“copyLink”、“copyMove”、“link”、“linkMove”、“move”、“all”和“uninitialized”。
- dataTransfer.items:该属性返回DataTransferItems对象，该对象代表了拖动数据。
- dataTransfer.setDragImage(element,x,y):设置拖放操作的自定义图标。其中element设置自定义图表，x，y分别为鼠标水平方向和竖直方向的距离。
- dataTransfer.addElement（element）：添加自定义图标。
- dataTransfer.types:该属性返回一个DOMStringList对象，该对象包括了存入dataTransfer中数据的所有类型。
- dataTransfer.getData(ormat)：获取DataTransfer对象中format格式的数据
- dataTransfer.setData(format，data)：向DataTransfer对象中设置format格式的数据。
- dataTransfer.clearData([format]):清除DataTransfer对象中format格式的数据，如果省略format，则清楚全部数据。
下面展示一个允许通过拖动来添加，删除”收藏夹“功能
[html] view plain copy
1. <!DOCTYPE HTML>
2. <html>
3. <head>
4. <meta http-equiv="Content-Type" content="text/html" charset="utf-8"/>
5. <title>通过拖动实现添加删除</title>
6. <style type="text/css">
7. div>div{
8. display: inline-block;
9. padding: 10px;
10. background-color: #aaa;
11. margin: 3px;
12. }
13. </style>
14. </head>
15. <body>
16. <div style="width:600px;border:1px solid #ccc;">
17. <h2>可以将喜欢的项目拖进收藏夹</h2>
18. <div draggable="true" ondragstart="dsHandler(event);">疯狂JAVA联盟</div>
19. <div draggable="true" ondragstart="dsHandler(event);">疯狂软件教育</div>
20. <div draggable="true" ondragstart="dsHandler(event);">源于我们</div>
21. <div draggable="true" ondragstart="dsHandler(event);">疯狂成员</div>
22. </div>
23. <div id="dest" style="widh:400px;height:400px;border:1px solid #ccc;float:left;">
24. <h2 ondragleave="return false;">收藏夹</h2>
25. </div>
26. <div id="gb" draggable="false" style="width:100px;height:100px;border:1px solid red;float:left;">我是垃圾桶</div>
27. <script type="text/javascript">
31. var dest = document.getElementById("dest");
32. //开始拖动事件的事件监听器
33. var dsHandler = function(evt){
34. //将被拖动元素的innerHTML属性值设置成被拖动的数据
35. evt.dataTransfer.setData("text/plain", "<item>" + evt.target.innerHTML);
36. }
39. dest.ondrop = function(evt){
40. var text = evt.dataTransfer.getData("text/plain");
41. //如果text以<item>开头
42. if(text.indexOf("<item>") == 0){
43. //创建一个新DIV元素
44. var newEle = document.createElement("div");
45. //以当前时间为该元素生成一个唯一的ID
46. newEle.id = new Date().getUTCMilliseconds();
47. //该元素内容为“拖”过来的数据
48. newEle.innerHTML = text.substring(6);
49. //该元素允许拖动
50. newEle.draggable = "true";
51. //为该元素的开始拖动事件指定监听器
52. newEle.ondragstart = function(evt){
53. //将被拖动元素的id属性设置成被拖动的数据
54. evt.dataTransfer.setData("text/plain","<remove>"+newEle.id);
55. }
56. dest.appendChild(newEle);
57. }
58. }
59. //当被拖动元素放到垃圾桶上触发该方法
60. document.getElementById("gb").ondrop = function(evt){
61. var id = evt.dataTransfer.getData("text/plain");
62. //如果id以<remove>开头
63. if(id.indexOf("<remove>") == 0){
64. //根据拖过来的数据，获取被拖动的元素
65. var target = document.getElementById(id.substring(8));
66. //删除被拖动的元素
67. dest.removeChild(target);
68. }
69. }
70. document.ondragover = function(evt){
71. //取消事件的默认行为
72. return false;
73. }
74. document.ondrop = function(evt){
75. //取消事件的默认行为
76. return false;
77. }
78. </script>
79. </body>
80. </html>
转载自 cyseria的博客：原文链接 http://blog.youkuaiyun.com/cyseria/article/details/38354291