【HTML5】拖放详解及实现案例

这篇具有很好参考价值的文章主要介绍了【HTML5】拖放详解及实现案例。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

效果预览

【HTML5】拖放详解及实现案例,HTML 笔记,html5,前端,html文章来源地址https://www.toymoban.com/news/detail-603329.html

代码实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>一颗不甘坠落的流星</title>
		<style>
			#div1,
			#div2 {
				float: left;
				width: 100px;
				height: 27px;
				margin: 10px;
				padding: 24px 0;
				text-align: center;
				border: 1px solid #aaaaaa;
			}
				
			span {
				display: inline-block;
				width: 50px;
				height: 25px;
				background-color: greenyellow;
			}
		</style>
	</head>
	<body>
		<!-- 4. ondragover 事件规定被拖动的数据能够被放置到何处。 -->
		<!-- 6. 当放开被拖数据时,会发生 drop 事件。 -->
		<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
			<!-- 1. 为了把一个元素设置为可拖放,请把 draggable 属性设置为 true -->
			<!-- 2. ondragstart 属性调用了一个 drag(event) 函数,规定拖动什么数据。 -->
			<span draggable="true" ondragstart="drag(event)" id="drag1"></span>
		</div>
		<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

	</body>
	<script type="text/javascript">
		function allowDrop(ev) {
			// 5. 默认地,数据/元素无法被放置到其他元素中。
			// 为了实现拖放,我们必须阻止元素的这种默认的处理方式。
			// 由 ondragover 事件的 event.preventDefault() 方法完成
			ev.preventDefault();
		}

		function drag(ev) {
			// 3. dataTransfer.setData() 方法设置被拖动数据的数据类型和值
			// 在本例中,数据类型是 "text",而值是这个可拖动元素的 id ("drag1")。
			ev.dataTransfer.setData("Text", ev.target.id);
		}

		function drop(ev) {
			// 调用 preventDefault() 来阻止数据的浏览器默认处理方式(drop 事件的默认行为是以链接形式打开)
			ev.preventDefault();
			通过 dataTransfer.getData() 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据
			var data = ev.dataTransfer.getData("Text");
			// 被拖数据是被拖元素的 id ("drag1")
			var span = document.getElementById(data)
			// 把被拖元素追加到放置元素中
			ev.target.appendChild(span);
		}
	</script>
</html>

到了这里,关于【HTML5】拖放详解及实现案例的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 响应式开发(HTML5CSS3)实现媒体查询的功能案例

    目录 前言 一、媒体查询知识点 二、实现功能的尺寸 三、代码部分 1.不带嵌套的媒体查询功能 1.1.代码段 1.2.运行结果 2.带嵌套的媒体查询功能  2.1.代码段 2.2.运行结果 2.2.3视频效果 1.本文讲解的响应式开发技术(HTML5+CSS3+Bootstrap)的HTML5媒体查询等功能方法的代码,这也是很

    2023年04月27日
    浏览(45)
  • html5学习笔记13-HTML5 新元素

    https://www.runoob.com/html/html5-new-element.html 新多媒体元素 新表单元素 新的语义和结构元素 移除的元素,HTML 4.01 元素在HTML5中已经被删除:

    2024年02月11日
    浏览(69)
  • html5学习精选5篇案例

      html5学习心得1 一:了解HTML5前端开发技术 HTML 指的是超文本标记语言 (Hyper Text Markup Language),标记语言是一套标记标签 (markup tag),HTML 使用标记标签来描述网页。HTML5区别于HTML的标准,基于全新的规则手册,提供了一些新的元素和属性,在web技术发展的过程中成为新的里程

    2024年02月12日
    浏览(38)
  • 读书笔记:《HTML5开发手册》--HTML5新的结构元素

    这是补充HTML5基础知识的系列内容,其他为: 一、HTML5-- 新的结构元素 二、HTML5-- figure、time、details、mark 三、HTML5-- details活学活用 四、HTML5-- 现存元素的变化 五、HTML5 -- Web表单 虽然从事前端开发已有很长一段时间,对HTML5标签也有使用,但在语义化上面理解还不够清晰。之前

    2024年02月07日
    浏览(57)
  • html5——前端笔记

    html页面: !DOCTYPE 不是一个 HTML 标签,它就是 文档类型声明标签,这句代码的意思是: 当前页面采取的是 HTML5 版本来显示网页 声明位于文档中的最前面的位置,处于 标签之前。 不是一个 HTML 标签,它就是 文档类型声明标签。 lang 语言种类,用来定义当前文档显示的语言。

    2024年02月10日
    浏览(40)
  • HTML5笔记

    入门基础技术点 html5 + css3 +移动web 基础环境 : 编辑器用vscode 浏览器用谷歌 概念:超文本标记语言 HyperText Markup Language 超文本是链接 标记 也叫标签带尖括号的文本 标签成对出现,中间包裹内容 里面放英文字母也就是标签名字 结束标签比开始标签多 / 例如加粗文字 要加粗

    2024年02月01日
    浏览(37)
  • 2023前端面试笔记 —— HTML5

    内容 链接 2023前端面试笔记 HTML5 HTML5作为最新的HTML标准,为前端开发带来了许多新的特性和功能。在前端面试中,HTML5的知识和应用已经成为了必备的技能。本篇文章将总结HTML5的 重要知识点和常见面试题 ,帮助读者更好地准备前端面试,提升自己的竞争力。 HTML 超文本标记

    2024年02月11日
    浏览(52)
  • HTML5中video元素详解

    https://blog.csdn.net/zhuchunyan_aijia/article/details/52277846 属性 说明 controls 显示标准的 HTML5 视频/音频播放器控制条、控制按钮。 autoplay 让文件自动播放。 loop 让文件循环播放。 preload 属性是用来缓存大体积文件的。它有三个可选值:“none” 不缓存、“auto” 缓存、“metadata” 只缓存

    2024年02月11日
    浏览(62)
  • HTML5 WebSocket 详解及使用

    WebSocket 没用过的同学,听上去,可能觉得很难,其实很简单,本章讲解了WebSocket基本信息,以及附有代码例子 WebSocket 是什么? WebSocket 是 HTML5 提供的一种在单个 TCP 连接上进行全双工通讯的协议。(双向通信协议) WebSocket 的作用? 实现客户端与服务器之间的双向通信, 允

    2023年04月09日
    浏览(34)
  • 编程笔记 html5&css&js 035 HTML 地理定位

    地理定位有很多事情有关,购物时要知道你在哪吧,驾车时就更是了,所有浏览器还提供了定位的功能,可以在网页中使用。 HTML5 Geolocation(地理定位)用于定位用户的位置。 HTML5 Geolocation API 用于获得用户的地理位置。 鉴于该特性可能侵犯用户的隐私,除非用户同意,否则

    2024年02月02日
    浏览(48)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包