js原生实现盒子连续拖拽

使用JavaScript实现拖放元素

最新推荐文章于 2024-03-10 22:45:15 发布

原创最新推荐文章于 2024-03-10 22:45:15 发布 · 170 阅读

1 ·

CC 4.0 BY-SA版权

前端基础同时被 3 个专栏收录

16 篇文章

订阅专栏

js算法

8 篇文章

订阅专栏

js事件

7 篇文章

订阅专栏

这篇博客通过一个简单的HTML和JavaScript示例展示了如何创建一个可拖放的蓝色方块。当用户按下鼠标并移动时，方块会跟随鼠标移动，直到用户释放鼠标。这是一个基础的前端交互实现。

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

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
</head>

<body>
	<div style="width: 100px;height: 100px;background-color: blue;position: relative;"></div>

	<script>
		var mydiv = document.getElementsByTagName("div")[0];

		mydiv.onmousedown = function (e) {
			var x = e.pageX;
			var y = e.pageY;
			//console.log(x,y);

            //盒子初始位置
			var boxX=parseInt(getComputedStyle(mydiv,null).left);
			var boxY=parseInt(getComputedStyle(mydiv,null).top);

			document.onmousemove = function (e) {
				distanceX = e.pageX - x;
				distanceY = e.pageY - y;

				mydiv.style.left =boxX+distanceX + "px";
				mydiv.style.top =boxY+distanceY + "px";
			}

			document.onmouseup = function () {
				document.onmouseup=false;
				document.onmousemove=false;

			}
		}

	</script>
</body>

</html>