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动画效果之animation的常用样式
Mar 09 HTML / CSS
CSS3混合模式mix-blend-mode/background-blend-mode简介
Mar 15 HTML / CSS
CSS3实战第一波 让我们尽情的圆角吧
Aug 27 HTML / CSS
css3气泡 css3关键帧动画创建的动态通知气泡
Feb 26 HTML / CSS
用CSS3实现Win8风格的方格导航菜单效果
Apr 10 HTML / CSS
多重CSS背景动画实现方法示例
Apr 04 HTML / CSS
css3 中的新特性加强记忆详解
Apr 16 HTML / CSS
canvas画布实现手写签名效果的示例代码
Apr 23 HTML / CSS
HTML5的hidden属性兼容老浏览器的方法
Apr 23 HTML / CSS
html5 canvas合成海报所遇问题及解决方案总结
Aug 03 HTML / CSS
Html5 video标签视频的最佳实践
Feb 26 HTML / CSS
详解如何获取localStorage最大存储大小的方法
May 21 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中VC6 X86和VC9 X86的区别及 Non Thread Safe的意思
2013/06/28 PHP
如何解决CI框架的Disallowed Key Characters错误提示
2013/07/05 PHP
PHP将回调函数作用到给定数组单元的方法
2014/08/19 PHP
CodeIgniter记录错误日志的方法全面总结
2016/05/17 PHP
PHP让网站移动访问更加友好方法
2019/02/14 PHP
微信公众平台开发教程①获取用户Openid及个人信息图文详解
2019/04/10 PHP
jQuery图片滚动图片的效果(另类实现)
2013/06/02 Javascript
JavaScript给input的value赋值引发的关于基本类型值和引用类型值问题
2015/12/07 Javascript
使用Web Uploader实现多文件上传
2016/06/08 Javascript
AngularJS 指令的交互详解及实例代码
2016/09/14 Javascript
浅谈Vue内置component组件的应用场景
2018/03/27 Javascript
JavaScript设计模式之模板方法模式原理与用法示例
2018/08/07 Javascript
对angularjs框架下controller间的传值方法详解
2018/10/08 Javascript
推荐15个最好用的JavaScript代码压缩工具
2019/02/13 Javascript
Vue实现点击当前行变色
2020/12/14 Vue.js
[01:33:59]真人秀《加油 DOTA》 第六期
2014/09/09 DOTA
[42:23]完美世界DOTA2联赛PWL S3 Forest vs Rebirth 第二场 12.10
2020/12/13 DOTA
Python xlrd读取excel日期类型的2种方法
2015/04/28 Python
浅析Python中signal包的使用
2015/11/13 Python
浅谈配置OpenCV3 + Python3的简易方法(macOS)
2018/04/02 Python
Python流程控制常用工具详解
2020/02/24 Python
python读取hdfs上的parquet文件方式
2020/06/06 Python
春秋航空官方网站:Spring Airlines
2017/09/27 全球购物
美国在线购物频道:Shop LC
2019/04/21 全球购物
飞利浦西班牙官方网站:Philips西班牙
2020/02/17 全球购物
ShellScript面试题一则-ShellScript编程
2014/03/05 面试题
力学专业毕业生自荐信
2013/11/17 职场文书
购房公证委托书(2014版)
2014/09/12 职场文书
办理房产过户的委托书
2014/09/14 职场文书
税务干部群众路线教育实践活动自我剖析材料
2014/09/21 职场文书
2015年精神文明建设工作总结
2015/04/21 职场文书
2015年社区党务工作总结
2015/04/21 职场文书
2016党校学习心得体会
2016/01/07 职场文书
2016年万圣节活动总结
2016/04/05 职场文书
MySQL pt-slave-restart工具的使用简介
2021/04/07 MySQL
redis数据结构之压缩列表
2022/03/21 Redis