详解HTML5中的拖放事件(Drag 和 drop)


Posted in HTML / CSS onNovember 14, 2016

浏览器支持

Internet Explorer 9、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。

注释:在 Safari 5.1.2 中不支持拖放。

HTML5 拖放实例

<!DOCTYPE html>
<html> 
<head> 
<style type="text/css"> 
#div1 {width:488px;height:70px;padding:10px;border:1px solid #aaaaaa;} 
</style> 
<script type="text/javascript"> 
function allowDrop(ev) 
{ 
ev.preventDefault(); 
} 
 
function drag(ev) 
{ 
ev.dataTransfer.setData("Text",ev.target.id); 
} 
 
function drop(ev) 
{ 
ev.preventDefault(); 
var data=ev.dataTransfer.getData("Text"); 
ev.target.appendChild(document.getElementById(data)); 
} 
</script> 
</head> 
<body> 
 
<p>请把 Aseoe logo的图片拖放到矩形中:p> 
 
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">div> 
<br /> 
<img id="drag1" src="http://www.aseoe.com/statics/images/eoe/logo.png" 
draggable="true" ondragstart="drag(event)" /> 
 
</body> 
</html>

设置元素为可拖放

首先,为了使元素可拖动,把 draggable 属性设置为 true :

拖动什么 - ondragstart 和 setData()

然后,规定当元素被拖动时,会发生什么。

在上面的例子中,ondragstart 属性调用了一个函数,drag(event),它规定了被拖动的数据。

dataTransfer.setData() 方法设置被拖数据的数据类型和值:

function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}

在这个例子中,数据类型是 "Text",值是可拖动元素的 id ("drag1")。

放到何处 - ondragover

ondragover 事件规定在何处放置被拖动的数据。

默认地,无法将数据/元素放置到其他元素中。如果需要设置允许放置,我们必须阻止对元素的默认处理方式。

这要通过调用 ondragover 事件的 event.preventDefault() 方法:

event.preventDefault()

进行放置 - ondrop

当放置被拖数据时,会发生 drop 事件。

在上面的例子中,ondrop 属性调用了一个函数,drop(event):

function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}

代码解释:

调用 preventDefault() 来避免浏览器对数据的默认处理(drop 事件的默认行为是以链接形式打开)

通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。

被拖数据是被拖元素的 id ("drag1")

把被拖元素追加到放置元素(目标元素)中

总结

以上就是这篇文章的全部内容了,希望本文的内容对各位学习或者使用HTML5能有所帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

HTML / CSS 相关文章推荐
CSS3 渐变(Gradients)之CSS3 径向渐变
Jul 08 HTML / CSS
css3学习心得分享
Aug 19 HTML / CSS
你应该知道的30个css选择器
Mar 19 HTML / CSS
目前不被任何主流浏览器支持的CSS3属性汇总
Jul 21 HTML / CSS
CSS3 分类菜单效果
May 27 HTML / CSS
Html5中的桌面通知Notification的实现
Sep 25 HTML / CSS
HTML5 常用语法一览(列举不支持的属性)
Jan 26 HTML / CSS
HTML5 Canvas画线技巧——实现绘制一个像素宽的细线
Aug 02 HTML / CSS
canvas离屏技术与放大镜实现代码示例
Aug 31 HTML / CSS
CSS3 天气图标动画效果
Apr 06 HTML / CSS
老生常谈 使用 CSS 实现三角形的技巧(多种方法)
Apr 13 HTML / CSS
CSS3 实现的图片悬停的切换按钮
Apr 13 HTML / CSS
HTML5不支持frameset的两种解决方法
Nov 14 #HTML / CSS
html5 视频播放解决方案
Nov 06 #HTML / CSS
HTML5头部标签的一些常用信息小结
Oct 23 #HTML / CSS
解决canvas转base64/jpeg时透明区域变成黑色背景的方法
Oct 23 #HTML / CSS
HTML5页面音视频在微信和app下自动播放的实现方法
Oct 20 #HTML / CSS
浅谈html5标签css3的常用样式
Oct 20 #HTML / CSS
html5中的一些标签学习(心得)
Oct 18 #HTML / CSS
You might like
PHP编程最快明白(第一讲 软件环境和准备工作)
2010/10/25 PHP
PHP中$_FILES的使用方法及注意事项说明
2014/02/14 PHP
php打包压缩文件之ZipArchive方法用法分析
2016/04/30 PHP
thinkPHP显示不出验证码的原因与解决方法分析
2017/05/20 PHP
php根据地址获取百度地图经纬度的实例方法
2019/09/03 PHP
实用的JS正则表达式(手机号码/IP正则/邮编正则/电话等)
2013/01/11 Javascript
js验证是否为数字的总结
2013/04/14 Javascript
无缝滚动js代码通俗易懂(自写)
2013/06/19 Javascript
nodeType属性返回被选节点的节点类型介绍
2013/11/22 Javascript
jQuery拖动div、移动div、弹出层实现原理及示例
2014/04/08 Javascript
提交按钮的name='submit'引起的js失效问题及原因
2015/02/25 Javascript
JavaScript中字符串拼接的基本方法
2015/07/07 Javascript
只要1K 纯JS脚本送你一朵3D红色玫瑰
2016/08/09 Javascript
Jqprint实现页面打印
2017/01/06 Javascript
JS正则表达式验证密码格式的集中情况总结
2017/02/23 Javascript
React中上传图片到七牛的示例代码
2017/10/10 Javascript
详解vue中点击空白处隐藏div的实现(用指令实现)
2018/04/19 Javascript
Vue实现点击时间获取时间段查询功能
2020/08/21 Javascript
详解Vue2 添加对scss的支持
2019/01/02 Javascript
vue项目中将element-ui table表格写成组件的实现代码
2019/06/12 Javascript
echarts大屏字体自适应的方法步骤
2019/07/12 Javascript
vue数据更新UI不刷新显示的解决办法
2020/08/06 Javascript
python实现获取序列中最小的几个元素
2014/09/25 Python
Python中使用pprint函数进行格式化输出的教程
2015/04/07 Python
Python multiprocessing模块中的Pipe管道使用实例
2015/04/11 Python
Python实现比较扑克牌大小程序代码示例
2017/12/06 Python
python使用正则表达式来获取文件名的前缀方法
2018/10/21 Python
链表面试题-一个链表的结点结构
2015/05/04 面试题
函授本科自我鉴定
2013/11/03 职场文书
入党思想汇报
2014/01/05 职场文书
宠物店的创业计划书范文
2014/01/11 职场文书
毕业证丢失证明
2014/01/15 职场文书
施工安全责任书
2014/04/14 职场文书
诉讼授权委托书
2014/10/15 职场文书
《7的乘法口诀》教学反思
2016/02/18 职场文书
聊一聊Redis与MySQL双写一致性如何保证
2021/06/26 Redis