详解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实例教程 一款纯css3实现的发光屏幕旋转特效
Dec 07 HTML / CSS
HTML5新增的标签和属性归纳总结
May 02 HTML / CSS
W3C公布最新的HTML5标准草案
Oct 17 HTML / CSS
HTML5之SVG 2D入门8—文档结构及相关元素总结
Jan 30 HTML / CSS
使用 HTML5 Canvas 制作水波纹效果点击图片就会触发
Sep 15 HTML / CSS
Html5 web本地存储实例详解
Jul 28 HTML / CSS
Html5监听手机摇一摇事件的实现
Nov 07 HTML / CSS
关于HTML5+ API plusready的兼容问题
Nov 20 HTML / CSS
CSS 文字装饰 text-decoration & text-emphasis 详解
Apr 06 HTML / CSS
HTML+CSS制作心跳特效的实现
May 26 HTML / CSS
CSS巧用渐变实现高级感背景光动画
Dec 06 HTML / CSS
postman中form-data、x-www-form-urlencoded、raw、binary的区别介绍
Jan 18 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
文件上传程序的全部源码
2006/10/09 PHP
PHP base64+gzinflate压缩编码和解码代码
2008/10/03 PHP
php学习之数据类型之间的转换介绍
2011/06/09 PHP
php $_SERVER windows系统与linux系统下的区别说明
2014/02/14 PHP
PHP实现超简单的SSL加密解密、验证及签名的方法示例
2017/08/28 PHP
仿163填写邮件地址自动显示下拉(无优化)
2008/11/05 Javascript
jQuery)扩展jQuery系列之一 模拟alert,confirm(一)
2010/12/04 Javascript
返回对象在当前级别中是第几个元素的实现代码
2011/01/20 Javascript
php图像生成函数之间的区别分析
2012/12/06 Javascript
js点击出现悬浮窗效果不使用JQuery插件
2014/01/20 Javascript
js操作滚动条事件实例
2015/01/29 Javascript
JavaScript内存管理介绍
2015/03/13 Javascript
Vue.js每天必学之数据双向绑定
2016/09/05 Javascript
全屏滚动插件fullPage.js使用实例解析
2016/10/21 Javascript
js链表操作(实例讲解)
2017/08/29 Javascript
Layui table 组件的使用之初始化加载数据、数据刷新表格、传参数
2017/09/11 Javascript
JS实现的文字间歇循环滚动效果完整示例
2018/02/13 Javascript
解决axios发送post请求返回400状态码的问题
2018/08/11 Javascript
vue将单页面改造成多页面应用的方法
2018/11/25 Javascript
Koa从零搭建到Api实现项目的搭建方法
2019/07/30 Javascript
mpvue实现微信小程序快递单号查询代码
2020/04/03 Javascript
Python安装第三方库的3种方法
2015/06/21 Python
Python中关于Sequence切片的下标问题详解
2017/06/15 Python
使用python实现个性化词云的方法
2017/06/16 Python
numpy.delete删除一列或多列的方法
2018/04/03 Python
Django中数据库的数据关系:一对一,一对多,多对多
2018/10/21 Python
python 将list转成字符串,中间用符号分隔的方法
2018/10/23 Python
python pands实现execl转csv 并修改csv指定列的方法
2018/12/12 Python
Python数据类型之Set集合实例详解
2019/05/07 Python
获取CSDN文章内容并转换为markdown文本的python
2020/09/06 Python
css3实现input输入框颜色渐变发光效果代码
2014/04/02 HTML / CSS
如何在Oracle中查看各个表、表空间占用空间的大小
2015/10/31 面试题
天坛导游词
2015/02/02 职场文书
vue Element-ui表格实现树形结构表格
2021/06/07 Vue.js
postgresql 删除重复数据案例详解
2021/08/02 PostgreSQL
基于Pygame实现简单的贪吃蛇游戏
2021/12/06 Python