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实现阅读进度条
Feb 27 HTML / CSS
CSS3动画之利用requestAnimationFrame触发重新播放功能
Sep 11 HTML / CSS
巧用CSS3 border实现图片遮罩效果代码
Apr 09 HTML / CSS
CSS3提交意见输入框样式代码
Oct 30 HTML / CSS
CSS3使用border-radius属性制作圆角
Dec 22 HTML / CSS
CSS3 text shadow字体阴影效果
Jan 08 HTML / CSS
HTML5 Canvas 起步(2) - 路径
May 12 HTML / CSS
html5小技巧之通过document.head获取head元素
Jun 04 HTML / CSS
canvas简易绘图的实现(海绵宝宝篇)
Jul 04 HTML / CSS
Html5适配iphoneX刘海屏的简单实现
Apr 09 HTML / CSS
CSS 伪元素::marker详解
Jun 26 HTML / CSS
使用CSS实现小三角边框原理解析
Nov 07 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
虫族 ZERG 概述
2020/03/14 星际争霸
PHP命名空间(Namespace)的使用详解
2013/05/04 PHP
PHP中判断变量为空的几种方法分享
2013/08/26 PHP
phpQuery占用内存过多的处理方法
2013/11/13 PHP
PIGCMS 如何关闭聊天机器人
2015/02/12 PHP
解决Laravel5.2 Auth认证退出失效的问题
2019/10/14 PHP
解密效果
2006/06/23 Javascript
图片自动缩小的js代码,用以防止图片撑破页面
2007/03/12 Javascript
php图像生成函数之间的区别分析
2012/12/06 Javascript
浅谈关于JavaScript的语言特性分析
2013/04/11 Javascript
jquery简单的弹出层浮动层代码
2015/04/27 Javascript
javascript实现Email邮件显示与删除功能
2015/11/21 Javascript
浅谈json取值(对象和数组)
2016/06/24 Javascript
如何防止INPUT按回车自动提交表单FORM
2016/12/06 Javascript
纯javaScript、jQuery实现个性化图片轮播【推荐】
2017/01/08 Javascript
基于canvas的二维码邀请函生成插件
2017/02/14 Javascript
利用node.js如何搭建一个简易的即时响应服务器
2017/05/28 Javascript
VSCode配置react开发环境的步骤
2017/12/27 Javascript
vue 指令和过滤器的基本使用(品牌管理案例)
2019/11/04 Javascript
javascript实现弹幕墙效果
2019/11/28 Javascript
深入理解redux之compose的具体应用
2020/01/12 Javascript
javascript实现打砖块小游戏(附完整源码)
2020/09/18 Javascript
[07:25]DOTA2-DPC中国联赛2月5日Recap集锦
2021/03/11 DOTA
在Python中使用matplotlib模块绘制数据图的示例
2015/05/04 Python
浅谈Python 字符串格式化输出(format/printf)
2016/07/21 Python
Python爬虫获取图片并下载保存至本地的实例
2018/06/01 Python
python日期与时间戳的各种转换示例
2020/02/12 Python
python跨文件使用全局变量的实现
2020/11/17 Python
迪奥官网:Dior.com
2018/12/04 全球购物
英国旅行箱包和行李箱购物网站:Travel Luggage & Cabin Bags
2019/08/26 全球购物
销售人员中英文自荐信
2013/09/22 职场文书
面包店的创业计划书范文
2014/01/16 职场文书
品牌推广策划方案
2014/05/28 职场文书
党员批评与自我批评发言材料
2014/10/14 职场文书
学校财务管理制度
2015/08/04 职场文书
创业计划书之电动车企业
2019/10/11 职场文书