javascript拖动事件

原创已于 2026-05-19 11:26:45 修改 · 370 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript

于 2022-04-22 17:28:02 首次发布

这是一个关于HTML5拖放事件的示例代码，展示了如何使用ondragstart、ondrag、ondragend、ondragenter、ondragover、ondragleave和ondrop事件创建一个简单的元素拖放功能。通过dataTransfer对象传递数据，并在drop事件中实现元素的移动。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>文档标题</title>
	<style>
		.box {
		  border: 1px solid red;
		  height: 50px
		}
	</style>
</head>
<body>
	<div class="box" ondrop="drop(event)" ondragover="dragover(event)">
		<p
		 ondragstart="dragStart(event)"
		 ondrag="dragging(event)"
		 draggable="true"
		 id="dragtarget"
		>
			日出江花红似火
		</p>
	</div>
	<div class="box" ondrop="drop(event)" ondragover="dragover(event)"></div>
	<div class="box" ondrop="drop(event)" ondragover="dragover(event)"></div>
	<div class="box" ondrop="drop(event)" ondragover="dragover(event)"></div>
	<script>
		function drop(e) {
			e.preventDefault()
			const data = e.dataTransfer.getData("text/plain")
			e.target.appendChild(document.getElementById(data))
		}
		function dragover(e){
			e.preventDefault();
		}
		function dragStart(e){
			e.dataTransfer.setData("text/plain", e.target.id)
		}
		function dragging(e){
			console.log(e)
		}
	</script>
</body>
</html>

在这里插入图片描述

事件	描述
ondrag	该事件在元素正在拖动时触发
ondragend	该事件在用户完成元素的拖动时触发
ondragleave	该事件在拖动元素离开放置目标时触发
ondragover	该事件在拖动元素在放置目标上时触发
ondragenter	该事件在拖动的元素进入放置目标时触发
ondragstart	该事件在用户开始拖动元素时触发
ondrop	该事件在拖动元素放置在目标区域时触发
draggable	属性规定元素是否可拖动