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中Transform动画属性用法详解
Jul 04 HTML / CSS
css3过渡_动力节点Java学院整理
Jul 11 HTML / CSS
CSS3属性选择符介绍
Oct 17 HTML / CSS
css3背景图片透明叠加属性cross-fade简介及用法实例
Jan 08 HTML / CSS
css 元素选择器的简单实例
May 23 HTML / CSS
详解CSS3阴影 box-shadow的使用和技巧总结
Dec 03 HTML / CSS
html5的新玩法——语音搜索
Jan 03 HTML / CSS
简单整理HTML5的基本特性和语法
Feb 18 HTML / CSS
整理HTML5中支持的URL编码与字符编码
Feb 23 HTML / CSS
html+css实现赛博朋克风格按钮
May 26 HTML / CSS
postman中form-data、x-www-form-urlencoded、raw、binary的区别介绍
Jan 18 HTML / CSS
CSS的calc函数用法小结
Jun 25 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 adodb介绍
2009/03/19 PHP
初品cakephp 入门基础
2012/02/16 PHP
php简单实现多字节字符串翻转的方法
2015/03/31 PHP
php强大的时间转换函数strtotime
2016/02/18 PHP
php实现微信扫码自动登陆与注册功能
2016/09/22 PHP
PHP与Perl之间知识点区别整理
2019/03/19 PHP
laravel withCount 统计关联数量的方法
2019/10/10 PHP
jquery事件重复绑定的快速解决方法
2014/01/03 Javascript
javascript数组去重方法终极总结
2014/06/05 Javascript
jQuery+jRange实现滑动选取数值范围特效
2015/03/14 Javascript
canvas实现钟表效果
2017/02/13 Javascript
利用jquery正则表达式在页面验证url网址输入是否正确
2017/04/04 jQuery
微信小程序6位或多位验证码密码输入框功能的实现代码
2018/05/29 Javascript
Node.js中读取TXT文件内容fs.readFile()用法
2018/10/10 Javascript
使用VueCli3+TypeScript+Vuex一步步构建todoList的方法
2019/07/25 Javascript
python time模块用法实例详解
2014/09/11 Python
python开发中range()函数用法实例分析
2015/11/12 Python
python dict 相同key 合并value的实例
2019/01/21 Python
python选取特定列 pandas iloc,loc,icol的使用详解(列切片及行切片)
2019/08/06 Python
python 两种方法删除空文件夹
2020/09/29 Python
css3实现3D色子翻转特效
2014/12/23 HTML / CSS
HTML5 CSS3实现一个精美VCD包装盒个性幻灯片案例
2014/06/16 HTML / CSS
HTML5本地存储之Web Storage详解
2016/07/04 HTML / CSS
ECCO爱步加拿大官网:北欧丹麦鞋履及皮具品牌
2017/07/08 全球购物
马德里竞技官方网上商店:Atletico Madrid Shop
2019/03/31 全球购物
*p++ 自增p 还是p所指向的变量
2016/07/16 面试题
如何打印出当前源文件的文件名以及源文件的当前行号
2015/04/05 面试题
下列程序在32位linux或unix中的结果是什么
2014/03/25 面试题
门卫岗位职责
2013/11/15 职场文书
入党积极分子介绍信
2014/01/17 职场文书
幼儿园教师国培感言
2014/02/02 职场文书
2014年商场超市庆元旦活动方案
2014/02/14 职场文书
校园文明标语
2014/06/13 职场文书
2015年医院护理部工作总结
2015/04/23 职场文书
英文辞职信范文
2015/05/13 职场文书
小学二年级班主任工作经验交流材料
2015/11/02 职场文书