JavaScript使用drag事件

最新推荐文章于 2023-08-05 08:58:09 发布

不愿透露姓名的余菜鸟

最新推荐文章于 2023-08-05 08:58:09 发布

阅读量663

点赞数

分类专栏： HTML 文章标签： html

本文链接：https://blog.csdn.net/u014572617/article/details/119386812

版权

HTML 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

前言

复习JS时突然想到drag事件，便想尝试。

开始我的代码是这样

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title></title>
	<style>
		.dragger {
			width: 100px;
			height: 100px;
			line-height: 100px;
			text-align: center;
			border: 1px solid #ccc;
			border-radius: 50%;
			user-select: none;
		}
	</style>
</head>

<body>
	<div class="dragger">拖动我！！</div>
	<script>
		let dragger = document.querySelector('.dragger')
		dragger.addEventListener("dragstart", (e) => {
			console.log(e)
			console.log('start')
		})
		dragger.addEventListener('drag', (e) => {
			console.log('move')
		})
		dragger.addEventListener("dragend", () => {
			console.log('end')
		})
	</script>
</body>

</html>