HTML5拖拽事件详解与应用-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_46677484/article/details/126630573

本文介绍了HTML5中的拖拽事件，包括拖放事件和放置事件的详细步骤，如dragstart、drag、dragend、dragenter、dragover和drop。通过DataTransfer对象实现数据交互，并给出了实现拖放操作的关键点，如设置元素可拖放、阻止默认行为以及在drop事件中获取和处理数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

拖拽事件

在H5中实现了拖拽技术，允许用户在网页内部拖拽以及浏览器与其他应用程序之间的拖拽，通过拖拽可以传递数据。

放置元素:默认是不可以放置得取消默认行为 event.preventDefault()

拖放元素:设置当前元素为可拖 draggable='true'

拖放事件:拖放元素使用
dragstart(开始拖放) drag(正在拖放) dragend(拖放结束)

用法：on拖放事件类型

放置事件:放置元素使用
dragenter(进入放置元素) dragover(放置元素内移动) drop(放置在放置元素内)

：用法：on放置事件类型

在拖拽事件中，通过DataTransfer来实现数据交互，通过event.dataTransfer来获取DataTransfer实例
方法：setData、getData、clearData

在开始拖放事件 dragstart 传输数据:event.dataTransfer.setData();
在放置事件drop 获取数据:event.dataTransfer.getData();

拖拽事件流:dragstart->drag->dragenter->dragover->drop->drapend

案例：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		.parent{
			height: 200px;
			border: 2px solid cyan;
		}
		.child{
			width: 100px;
			height: 100px;
			background-color: blue;
			color: white;
			float: left;
			margin:10px 0 0 10px;
		}
		body{
			height: 400px;
		}
	</style>
	<script>
		window.onload=function(){
			// 获取parent和child
			var parent=document.querySelector('.parent');
			var childs=document.querySelectorAll('.child');
          // 将类数组转成数组
			childs=Array.from(childs);

			// 给每一个孩子节点绑定事件方法：
			// childs.forEach(function(item){
			// 	item.onclick=function(){
			// 		parent.appendChild(this)
			// 	}
			// });


			childs.forEach(function(item){
				// 拖动事件 
				// 开始拖动 on事件类型
				item.ondragstart=function(event){
					console.log('ondragstart开始拖动了');
					// console.log(event,'事件对象');
					// 将拖动元素的id传出去
					// dataTransfer.setData 传输数据 参数(key value)
					console.log(item.id);
					event.dataTransfer.setData('id',item.id);
				}
				// 正在拖动
				item.ondrag=function(){
					console.log('ondrap正在拖动');
				}
				// 拖动结束
				item.ondragend=function(){
					console.log('ondragend拖动结束');
				}
			})


			// 放置事件 --放置元素 parent
			// 进入到放置元素
			parent.ondragenter=function(){
				console.log('ondragenter进入到放置元素');
			}
			// 在放置元素内移动
			parent.ondragover=function(){
				console.log('ondragover正在放置元素内移动');
				// 将放置元素设置为可放置   取消默认 默认时不可放置
				event.preventDefault();
			}
			// 将拖动元素放置到放置元素
			parent.ondrop=function(event){
				console.log('ondrop放置');
				//获取拖动元素传输得数据getData(key)
				// console.log(event.dataTransfer.getData('id'),'事件对象');
				var id=event.dataTransfer.getData('id');
				this.appendChild(document.querySelector('#'+id))
				// 阻止事件冒泡
				event.stopPropagation()
			}
			// 将拖动元素放置到body
			document.body.ondragover=function(){
				console.log('ondragover正在放置元素内移动');
				// 将放置元素设置为可放置
				event.preventDefault();
			}
			// 将拖动元素放置到放置元素
			document.body.ondrop=function(event){
				console.log('ondrop放置');
				//获取拖动元素传输的数据getData(key)
				// console.log(event.dataTransfer.getData('id'),'事件对象');
				var id=event.dataTransfer.getData('id');
				this.appendChild(document.querySelector('#'+id))
				// 阻止事件冒泡
				event.stopPropagation()
			}
			
			
		}
	</script>
</head>
<body>
	<!-- 放置元素:parent  放置事件:dragenter dragover drop-->
	<!-- 拖动元素:child 拖动事件：dragstart drag dragend-->
	<div class="parent"></div>
	<!-- 设置当前元素可拖拽 draggable设置当前元素是否可拖拽 -->
	<div class="child" id="one" draggable="true">one</div>
	<div class="child" id="two" draggable="true">two</div>
	<div class="child" id="three" draggable="true">three</div>
	<div class="child" id="four" draggable="true">four</div>
</body>
</html>

难点：

在开始拖动事件dragstart中将拖动元素的id传出去

// dataTransfer.setData 传输数据 key value
event.dataTransfer.setData('id',item.id);

在放置元素内移动dragover中要将放置元素设置为可放置，默认是不可放置的

// 将放置元素设置为可放置
				event.preventDefault();

将拖动元素放置到放置元素中drop获取拖动元素传输的数据getData(key)

//获取拖动元素传输得数据getData(key)
			
				var id=event.dataTransfer.getData('id');

将拖动元素放置到放置元素中drop将child添加到parent

this.appendChild(document.querySelector('#'+id))

将拖动元素放置到放置元素中drop 要阻止事件冒泡

// 阻止事件冒泡
				event.stopPropagation()

在放置元素内移动dragover中要将放置元素设置为可放置，将拖动元素放置到body

document.body.ondragover=function(){
				console.log('ondragover正在放置元素内移动');
				// 将放置元素设置为可放置
				event.preventDefault();
			}

将拖动元素放置到放置元素中drop将拖动元素放置到放置元素并且要阻止事件冒泡

document.body.ondrop=function(event){
				console.log('ondrop放置');
				//获取拖动元素传输得数据getData(key)
				var id=event.dataTransfer.getData('id');
				this.appendChild(document.querySelector('#'+id))
				// 阻止事件冒泡
				event.stopPropagation()
			}