当前位置： 移动技术网 > IT编程>网页制作>Html5 > HTML5如何实现元素拖拽

HTML5如何实现元素拖拽

2019年07月25日  | 移动技术网IT编程  | 我要评论

alg是什么进程,企业网站备案,风机配件

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

先上示例：

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");

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

原文：

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网