master

分支 (1)

管理

管理

master

dragging
/
元素拖动.html

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>元素的拖动</title>
	<style>
		#drag {
			cursor: move;
			position: absolute;
			user-select: none;
			display: flex;
			justify-content: center;
			align-items: center;
			border: 1px solid #cbd5e0;
			width: 100px;
			height: 100px;
		}
	</style>
</head>

<body>
	<div id="drag">橙某人</div>

	<script>
		document.addEventListener('DOMContentLoaded', () => {
			const drag = document.getElementById('drag');
			drag.addEventListener('mousedown', mouseDownHandler);

			let x = 0;
			let y = 0;
			function mouseDownHandler(e) {
				x = e.clientX;
				y = e.clientY;
				document.addEventListener('mousemove', mouseMoveHandler);
				document.addEventListener('mouseup', mouseUpHandler);
			};
			function mouseMoveHandler(e) {
				const dx = e.clientX - x;
				const dy = e.clientY - y;
				drag.style.top = `${drag.offsetTop + dy}px`;
				drag.style.left = `${drag.offsetLeft + dx}px`;
				x = e.clientX;
				y = e.clientY;
			};
			function mouseUpHandler() {
				document.removeEventListener('mousemove', mouseMoveHandler);
				document.removeEventListener('mouseup', mouseUpHandler);
			};
		});
	</script>
</body>

</html>