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属性选择符介绍
Oct 17 HTML / CSS
CSS3提交意见输入框样式代码
Oct 30 HTML / CSS
使用CSS3创建动态菜单效果
Jul 10 HTML / CSS
CSS3实现文字波浪线效果示例代码
Nov 20 HTML / CSS
CSS3 实现雷达扫描图的示例代码
Sep 21 HTML / CSS
html5音频_动力节点Java学院整理
Aug 22 HTML / CSS
html5 桌面提醒:Notifycations应用介绍
Nov 27 HTML / CSS
HTML5的一个显示电池状态的API简介
Jun 18 HTML / CSS
详解html5 canvas常用api总结(二)--绘图API
Dec 14 HTML / CSS
HTML5实现可缩放时钟代码
Aug 28 HTML / CSS
HTML5自定义mp3播放器源码
Jan 06 HTML / CSS
前端使用canvas生成盲水印的加密解密的实现
Dec 16 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生成月历代码
2007/06/14 PHP
codeigniter教程之上传视频并使用ffmpeg转flv示例
2014/02/13 PHP
PHP如何通过传引用的思想实现无限分类(代码简单)
2015/10/13 PHP
php原生导出excel文件的两种方法(推荐)
2016/11/19 PHP
Javascript学习笔记5 类和对象
2010/01/11 Javascript
新鲜出炉的js tips提示效果
2011/04/03 Javascript
浅析jQuery对select操作小结(遍历option,操作option)
2013/07/04 Javascript
jQuery+Ajax实现无刷新操作
2016/01/04 Javascript
原生JS京东轮播图代码
2017/03/22 Javascript
jQuery轻松实现无缝轮播效果
2017/03/22 jQuery
vue音乐播放器插件vue-aplayer的配置及其使用实例详解
2017/07/10 Javascript
vue中使用refs定位dom出现undefined的解决方法
2017/12/21 Javascript
Vuejs 实现简易 todoList 功能 与 组件实例代码
2018/09/10 Javascript
element ui table(表格)实现点击一行展开功能
2018/12/04 Javascript
JavaScript常见事件对象与操作实例总结
2019/01/05 Javascript
微信小程序实用代码段(收藏版)
2019/12/17 Javascript
[03:10]2014DOTA2 TI马来劲旅Titan首战告捷目标只是8强
2014/07/10 DOTA
[33:19]完美世界DOTA2联赛PWL S2 PXG vs InkIce 第一场 11.26
2020/11/30 DOTA
Python手机号码归属地查询代码
2016/05/04 Python
python Matplotlib画图之调整字体大小的示例
2017/11/20 Python
python3+PyQt5+Qt Designer实现堆叠窗口部件
2018/04/20 Python
Python实现的读取/更改/写入xml文件操作示例
2018/08/30 Python
强悍的Python读取大文件的解决方案
2019/02/16 Python
PyCharm搭建Spark开发环境实现第一个pyspark程序
2019/06/13 Python
python处理自动化任务之同时批量修改word里面的内容的方法
2019/08/23 Python
用OpenCV将视频分解成单帧图片,图片合成视频示例
2019/12/10 Python
Mac PyCharm中的.gitignore 安装设置教程
2020/04/16 Python
html5 Canvas画图教程(7)—canvas里画曲线之quadraticCurveTo方法
2013/01/09 HTML / CSS
Christys’ Hats官网:英国帽子制造商
2018/11/28 全球购物
Armor Lux法国官方网站:水手服装、成衣和内衣
2020/05/26 全球购物
美国轻奢时尚购物网站:REVOLVE(支持中文)
2020/07/18 全球购物
医院实习介绍信
2014/01/12 职场文书
企业职业病防治方案
2014/05/29 职场文书
高效课堂标语
2014/06/26 职场文书
个人批评与自我批评材料
2014/10/17 职场文书
vmware虚拟机打不开vmx文件怎么办 ?vmware虚拟机vmx文件打开方法
2022/04/08 数码科技