欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

HTML5如何实现元素拖拽

程序员文章站 2023-12-04 14:46:47
这篇文章主要为大家详细介绍了HTML5是如何实现元素拖拽，拖拽效果的实现方法，感兴趣的小伙伴们可以参考一下... 16-03-11...

很多前端恐怕都不了解html5的拖拽怎么实现吧，本文了解了下思路。进行整理备份，便于以后查阅。

先上示例：

index.html

xml/html code复制内容到剪贴板
  1. <!doctype html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="utf-8">  
  5.     <title>drag</title>  
  6.     <style>  
  7.         .box{   
  8.             width: 400px;   
  9.             height: 400px;   
  10.             float: left;   
  11.         }   
  12.         #box1{   
  13.             background: #ccc;   
  14.         }   
  15.         #box2{   
  16.             background: #ff0;   
  17.         }   
  18.     </style>  
  19. </head>  
  20. <body>  
  21. <div id="box1" class="box"></div>  
  22. <div id="box2" class="box"></div>  
  23. <img src="http://pica.zol-img.com.cn/2016/02/1ace90ad77db716547614a18c4a9263g.jpg" alt="" id="img1" />  
javascript code复制内容到剪贴板
  1. <script src="app1.js"></script>   
  2. </body>   
  3. </html>   
  4.   
  5. app1.js   
  6. /**  
  7.  *   app1.js  
  8.  */  
  9.   
  10. var obox1,   
  11.     obox2,   
  12.     oimg1;   
  13.   
  14. window.onload = function(){   
  15.     obox1 = document.getelementbyid('box1');   
  16.     obox2 = document.getelementbyid('box2');   
  17.     oimg1 = document.getelementbyid('img1');   
  18.   
  19.     //   
  20.     obox1.ondragover = obox2.ondragover = function(e){   
  21.         e.preventdefault();   
  22.     };   
  23.   
  24.     //   
  25.     oimg1.ondragstart = function(e){   
  26.         e.datatransfer.setdata('text', e.target.id);   
  27.     };   
  28.   
  29.     obox1.ondrop = dropimg;   
  30.     obox2.ondrop = dropimg;   
  31. };   
  32.   
  33. function dropimg(e){   
  34.     e.preventdefault();   
  35.     var tempimg = document.getelementbyid(e.datatransfer.getdata('text'));   
  36.     e.target.appendchild(tempimg);   
  37. }    

涉及知识点

在拖放的过程中会触发以下事件：
在拖动目标上触发事件 (源元素)
　　ondragstart - 用户开始拖动元素时触发
　　ondrag - 元素正在拖动时触发
　　ondragend - 用户完成元素拖动后触发

释放目标时触发的事件
　　ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件
　　ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件
　　ondragleave - 当被鼠标拖动的对象离开其容器范围内时触发此事件
　　ondrop - 在一个拖动过程中，释放鼠标键时触发此事件

event对象（以e代替）

e.target

　　w3cschool上的解释是：返回触发此事件的元素（事件的目标节点），这个target属性只兼容ie9及以上

e.preventdefault()

　　取消事件的默认动作。

e.datatransfer.setdata()

　　设置被拖数据的数据类型和值：

复制代码
代码如下:
e.datatransfer.setdata("text",ev.target.id); //第一个参数为text（小写的也行）

e.datatransfer.getdata()

　　获得被拖的数据：

复制代码
代码如下:
e.datatransfer.getdata("text");

以上就是本文的全部内容，希望对大家的学习有所帮助。

原文：

上一篇： java实现的汉字转五笔功能实例

下一篇： 详解HTML5中垂直上下居中的解决方案

推荐阅读