首页 web前端 H5教程 HTML5拖放:Drag和Drop分别指什么?怎么使用的?

HTML5拖放:Drag和Drop分别指什么?怎么使用的?

Aug 13, 2018 pm 07:11 PM

现在的HTML5这么火,让我们来认识一下这些新元素吧,本篇主要带领大家认识什么是HTML5的拖放元素,以及怎么使用的。

HTML5中拖放是什么意思?

拖放是一种常见的特性,即抓取对象以后拖到另一个位置。,拖放的目的是可以让你将某个对象放置到你想要放置的位置。 在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放。

Drag和Drop分别指什么?

darg:事件主体是被拖放元素,在正在拖放被拖放元素时触发。

drop:事件主体是目标元素,在目标元素完全接受被拖放元素时触发。

浏览器支持

Internet Explorer  Firefox  Opera  Google Chrome  Safari

Internet Explorer 9 , Firefox, Opera, Chrome, 和 Safari 支持拖动。

注意:Safari 5.1.2不支持拖动.

HTML5 拖放使用实例

下面的例子是一个简单的拖放实例:

这有实例:

<!DOCTYPE HTML> 
<html> 
<head> 
<script> 
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> 
<div id="div1" ondrop="drop(event)" 
ondragover="allowDrop(event)"></div> 
<img id="drag1" src="img_logo.gif" draggable="true" 
ondragstart="drag(event)" width="336" height="69"> 
</body> 
</html>
登录后复制

它看上去也许有些复杂,不过我们可以分别研究拖放事件的不同部分。

拖放事件执行详细步骤:

1.设置元素为可拖放

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

<img draggable="true">
登录后复制

拖动什么 - ondragstart 和 setData()

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

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

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

function drag(ev)        
{
ev.dataTransfer.setData("Text",ev.target.id);       
}
登录后复制

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

提示:你可以在本站的“ondragstart 事件”部分了解到更多的有用信息!

2. 放到何处 - ondragover

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

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

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

 event.preventDefault()

3. 进行放置 - 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"),把被拖元素追加到放置元素(目标元素)中。

【相关推荐】

html的基础元素,让你零基础学习HTML

HTML和HTML5的发展历史

以上是HTML5拖放:Drag和Drop分别指什么?怎么使用的?的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热门文章

<🎜>:泡泡胶模拟器无穷大 - 如何获取和使用皇家钥匙
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
北端:融合系统,解释
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
Mandragora:巫婆树的耳语 - 如何解锁抓钩
3 周前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

热门话题

Java教程
1672
14
CakePHP 教程
1428
52
Laravel 教程
1333
25
PHP教程
1277
29
C# 教程
1257
24
H5代码:Web开发人员的最佳实践 H5代码:Web开发人员的最佳实践 Apr 16, 2025 am 12:14 AM

H5代码的最佳实践包括:1.使用正确的DOCTYPE声明和字符编码;2.采用语义化标签;3.减少HTTP请求;4.使用异步加载;5.优化图像。这些实践能提升网页的效率、可维护性和用户体验。

H5:网络标准和技术的发展 H5:网络标准和技术的发展 Apr 15, 2025 am 12:12 AM

Web标准和技术从HTML4、CSS2和简单的JavaScript演变至今,经历了显着的发展。 1)HTML5引入了Canvas、WebStorage等API,增强了Web应用的复杂性和互动性。 2)CSS3增加了动画和过渡功能,使页面效果更加丰富。 3)JavaScript通过Node.js和ES6的现代化语法,如箭头函数和类,提升了开发效率和代码可读性,这些变化推动了Web应用的性能优化和最佳实践的发展。

H5:如何增强网络上的用户体验 H5:如何增强网络上的用户体验 Apr 19, 2025 am 12:08 AM

H5通过多媒体支持、离线存储和性能优化提升网页用户体验。1)多媒体支持:H5的和元素简化开发,提升用户体验。2)离线存储:WebStorage和IndexedDB允许离线使用,提升体验。3)性能优化:WebWorkers和元素优化性能,减少带宽消耗。

了解H5代码:HTML5的基本原理 了解H5代码:HTML5的基本原理 Apr 17, 2025 am 12:08 AM

HTML5是构建现代网页的关键技术,提供了许多新元素和功能。1.HTML5引入了语义化元素如、、等,增强了网页结构和SEO。2.支持多媒体元素和,无需插件即可嵌入媒体。3.表单增强了新输入类型和验证属性,简化了验证过程。4.提供了离线和本地存储功能,提升了网页性能和用户体验。

解构H5代码:标签,元素和属性 解构H5代码:标签,元素和属性 Apr 18, 2025 am 12:06 AM

HTML5代码由标签、元素和属性组成:1.标签定义内容类型,用尖括号包围,如。2.元素由开始标签、内容和结束标签组成,如内容。3.属性在开始标签中定义键值对,增强功能,如。这些是构建网页结构的基本单位。

H5代码的基础:密钥元素及其目的 H5代码的基础:密钥元素及其目的 Apr 23, 2025 am 12:09 AM

HTML5的关键元素包括、、、、、等,用于构建现代网页。1.定义头部内容,2.用于导航链接,3.表示独立文章内容,4.组织页面内容,5.展示侧边栏内容,6.定义页脚,这些元素增强了网页的结构和功能性。

HTML5和H5:了解常见用法 HTML5和H5:了解常见用法 Apr 22, 2025 am 12:01 AM

HTML5和H5没有区别,H5是HTML5的简称。1.HTML5是HTML的第五个版本,增强了网页的多媒体和交互功能。2.H5常用于指代基于HTML5的移动网页或应用,适用于各种移动设备。

H5和HTML5之间的连接:相似性和差异 H5和HTML5之间的连接:相似性和差异 Apr 24, 2025 am 12:01 AM

H5和HTML5是不同的概念:HTML5是HTML的一个版本,包含新元素和API;H5是基于HTML5的移动应用开发框架。HTML5通过浏览器解析和渲染代码,H5应用则需要容器运行并通过JavaScript与原生代码交互。

See all articles