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 相关文章推荐
利用CSS3的border-radius绘制太极及爱心图案示例
May 17 HTML / CSS
CSS3绘制六边形的简单实现
Aug 25 HTML / CSS
Css3新特性应用之视觉效果实例
Dec 12 HTML / CSS
CSS3实现全景图特效示例代码
Mar 26 HTML / CSS
HTML5 canvas基本绘图之绘制线段
Jun 27 HTML / CSS
html5实现微信打飞机游戏
Mar 27 HTML / CSS
HTML5有哪些新特征
Dec 01 HTML / CSS
HTML5 body设置自适应全屏
May 07 HTML / CSS
HTML5 FileReader对象的具体使用方法
May 22 HTML / CSS
html5小程序飞入购物车(抛物线绘制运动轨迹点)
Oct 19 HTML / CSS
CSS3实现的水平标题菜单
Apr 14 HTML / CSS
html输入两个数实现加减乘除功能
Jul 01 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实现图片旋转效果实例代码
2014/10/01 PHP
PHP实现简单爬虫的方法
2015/07/29 PHP
jQuery 自定义函数写法分享
2012/03/30 Javascript
扩展jQuery对象时如何扩展成员变量具体怎么实现
2014/04/25 Javascript
node.js中的http.createClient方法使用说明
2014/12/15 Javascript
Nodejs中调用系统命令、Shell脚本和Python脚本的方法和实例
2015/01/01 NodeJs
jquery通过ajax加载一段文本内容的方法
2015/01/15 Javascript
JavaScript中标识符提升问题
2015/06/11 Javascript
javascript 数组去重复(在线去重工具)
2016/12/17 Javascript
JavaScript使用math.js进行精确计算操作示例
2018/06/19 Javascript
使用vuepress搭建静态博客的示例代码
2019/02/14 Javascript
详解vuex数据传输的两种方式及this.$store undefined的解决办法
2019/08/26 Javascript
使用easyui从servlet传递json数据到前端页面的两种方法
2019/09/05 Javascript
浅谈TypeScript 用 Webpack/ts-node 运行的配置记录
2019/10/11 Javascript
vue实现导航菜单和编辑文本的示例代码
2020/07/04 Javascript
python解析模块(ConfigParser)使用方法
2013/12/10 Python
零基础写python爬虫之神器正则表达式
2014/11/06 Python
Python实现一个Git日志统计分析的小工具
2017/12/14 Python
在python中bool函数的取值方法
2018/11/01 Python
Pytorch卷积层手动初始化权值的实例
2019/08/17 Python
Django接收自定义http header过程详解
2019/08/23 Python
python基于socket实现的UDP及TCP通讯功能示例
2019/11/01 Python
Python数据可视化:顶级绘图库plotly详解
2019/12/07 Python
美国美妆网站:B-Glowing
2016/10/12 全球购物
意大利在线高尔夫商店:Online Golf
2021/03/09 全球购物
什么是静态路由,其特点是什么?什么是动态路由,其特点是什么?
2013/07/26 面试题
入党转预备思想汇报
2014/01/07 职场文书
环境工程专业自荐信范文
2014/03/18 职场文书
法人委托书范本
2014/04/04 职场文书
艺术设计专业个人求职信
2014/04/10 职场文书
保护环境建议书400字
2014/05/13 职场文书
《鸟的天堂》教学反思
2016/02/19 职场文书
python 机器学习的标准化、归一化、正则化、离散化和白化
2021/04/16 Python
教你怎么用Python处理excel实现自动化办公
2021/04/30 Python
Dubbo+zookeeper搭配分布式服务的过程详解
2022/04/03 Java/Android
Win11局域网共享权限在哪里设置? Win11高级共享的设置技巧
2022/04/05 数码科技