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

文章目录

效果预览

代码实现

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>
相关推荐
有梦想的刺儿12 分钟前
webWorker基本用法
前端·javascript·vue.js
cy玩具33 分钟前
点击评论详情,跳到评论页面,携带对象参数写法:
前端
qq_390161771 小时前
防抖函数--应用场景及示例
前端·javascript
John.liu_Test2 小时前
js下载excel示例demo
前端·javascript·excel
Yaml42 小时前
智能化健身房管理:Spring Boot与Vue的创新解决方案
前端·spring boot·后端·mysql·vue·健身房管理
PleaSure乐事2 小时前
【React.js】AntDesignPro左侧菜单栏栏目名称不显示的解决方案
前端·javascript·react.js·前端框架·webstorm·antdesignpro
哟哟耶耶2 小时前
js-将JavaScript对象或值转换为JSON字符串 JSON.stringify(this.SelectDataListCourse)
前端·javascript·json
getaxiosluo2 小时前
react jsx基本语法,脚手架,父子传参,refs等详解
前端·vue.js·react.js·前端框架·hook·jsx
理想不理想v2 小时前
vue种ref跟reactive的区别?
前端·javascript·vue.js·webpack·前端框架·node.js·ecmascript
知孤云出岫2 小时前
web 渗透学习指南——初学者防入狱篇
前端·网络安全·渗透·web