HTML5如何实现元素拖拽


Posted in HTML / CSS onMarch 11, 2016

很多前端恐怕都不了解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");

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

原文:http://www.cnblogs.com/oovwall/p/5213580.html

HTML / CSS 相关文章推荐
使用CSS Grid布局实现网格的流动
Dec 30 HTML / CSS
CSS中越界问题的经典解决方案【推荐】
Apr 19 HTML / CSS
CSS3 实现童年的纸飞机
May 05 HTML / CSS
html5使用html2canvas实现浏览器截图的示例
Aug 31 HTML / CSS
HTML5 b和i标记将被赋予真正的语义
Jul 16 HTML / CSS
Html5 FileReader实现即时上传图片功能实例代码
Sep 01 HTML / CSS
HTML5中drawImage用法分析
Dec 01 HTML / CSS
HTML5到底会有什么发展?HTML5的前景展望
Jul 07 HTML / CSS
浅析HTML5中的 History 模式
Jun 22 HTML / CSS
基于canvas使用贝塞尔曲线平滑拟合折线段的方法
Jan 10 HTML / CSS
html5调用摄像头实例代码
Jun 28 HTML / CSS
纯 CSS 自定义多行省略的问题(从原理到实现)
Nov 11 HTML / CSS
Android本地应用打开方法——通过html5写连接
Mar 11 #HTML / CSS
利用简洁的图片预加载组件提升html5移动页面的用户体验
Mar 11 #HTML / CSS
使用HTML5 Canvas绘制直线或折线等线条的方法讲解
Mar 14 #HTML / CSS
借助HTML5 Canvas来绘制三角形和矩形等多边形的方法
Mar 14 #HTML / CSS
HTML5 Canvas绘制文本及图片的基础教程
Mar 14 #HTML / CSS
用HTML5 Canvas API中的clearRect()方法实现橡皮擦功能
Mar 15 #HTML / CSS
网页中的电话号码如何实现一键直呼效果_附示例
Mar 15 #HTML / CSS
You might like
第三章 php操作符与控制结构代码
2011/12/30 PHP
php截取后台登陆密码的代码
2012/05/05 PHP
php警告Creating default object from empty value 问题的解决方法
2014/04/02 PHP
PHP动态页生成静态页的3种常用方法
2014/11/13 PHP
javascript+php实现根据用户时区显示当地时间的方法
2015/03/11 PHP
PHP怎样用正则抓取页面中的网址
2016/08/09 PHP
javascript Onunload与Onbeforeunload使用小结
2009/12/31 Javascript
基于Bootstrap里面的Button dropdown打造自定义select
2016/05/30 Javascript
JavaScript正则表达式的贪婪匹配和非贪婪匹配
2017/09/05 Javascript
React实践之Tree组件的使用方法
2017/09/30 Javascript
js 实现复选框只能选择一项的示例代码
2018/01/23 Javascript
vue获取当前激活路由的方法
2018/03/17 Javascript
详解Element-UI中上传的文件前端处理
2019/08/07 Javascript
[50:27]Secret vs VG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
Flask框架学习笔记(一)安装篇(windows安装与centos安装)
2014/06/25 Python
Python通过正则表达式选取callback的方法
2015/07/18 Python
python开发之for循环操作实例详解
2015/11/12 Python
对python中的try、except、finally 执行顺序详解
2019/02/18 Python
python制作抖音代码舞
2019/04/07 Python
Python爬虫实现“盗取”微信好友信息的方法分析
2019/09/16 Python
浅谈python的elementtree模块处理中文注意事项
2020/03/06 Python
Python unittest 自动识别并执行测试用例方式
2020/03/09 Python
jupyter notebook 参数传递给shell命令行实例
2020/04/10 Python
Python 实现将numpy中的nan和inf,nan替换成对应的均值
2020/06/08 Python
uniapp+Html5端实现PC端适配
2020/07/15 HTML / CSS
Supersmart英国:欧洲市场首批食品补充剂供应商之一
2018/05/05 全球购物
J2EE面试题
2016/03/14 面试题
岗位职责范本
2013/11/23 职场文书
教师党性分析材料
2014/02/04 职场文书
优秀毕业生求职信
2014/06/05 职场文书
追悼词范文大全
2015/06/23 职场文书
2016年助残日旅游活动总结
2016/04/01 职场文书
创业计划书之牛肉汤快餐店
2019/10/08 职场文书
Nginx反爬虫策略,防止UA抓取网站
2021/03/31 Servers
HTML怎么设置下划线?html文字加下划线方法
2021/12/06 HTML / CSS
Python各协议下socket黏包问题原理
2022/04/12 Python