鼠标拖拽div移动

最新推荐文章于 2024-03-21 14:30:47 发布

OMiGr

最新推荐文章于 2024-03-21 14:30:47 发布

阅读量288

点赞数

分类专栏：前端实例文章标签： javascript html5 css

本文链接：https://blog.csdn.net/OMiGr/article/details/113186497

版权

前端实例专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文介绍如何使用JavaScript和HTML5实现div元素的鼠标拖拽移动功能，包括详细步骤和代码示例。

摘要由CSDN通过智能技术生成

鼠标拖拽div移动

效果图：
在这里插入图片描述

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>鼠标拖拽div移动</title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			#box{
				width: 100px;
				height: 100px;
				position: relative;
				background-color: #FF0000;
			}
		</style>
		<script type="text/javascript">
			window.onload = function(){
				let boxx = 0;
				let boxy = 0;
				var isDown = false;
				//用于存储新的光标坐标
				let mosx = 0;
				let mosy = 0;
				let mosx2 = 0;
				let mosy2 = 0;
				
				//获取box
				const box = document.getElementById('box');
				//box元素鼠标按下触发事件
				box.onmousedown  = function(e){
					
					//获取并记录鼠标第一次按下时光标的坐标
					mosx = e.pageX;
					mosy = e.pageY;
					
					//开关打开
					isDown = true;
				};
				
				//设置鼠标移动事件
				window.onmousemove = function(e){
					if (!isDown) {
					    return;
					}
					//获取光标移动时光标的新坐标
					mosx2 = e.pageX;
					mosy2 = e.pageY;
					//计算box的新坐标
					boxx += (mosx2 - mosx);
					boxy += (mosy2 - mosy);
					//将光标的旧坐标更新
					mosx = mosx2;
					mosy = mosy2;
					//移动box
					box.style.top = boxy + "px";
					box.style.left = boxx + "px";
				};
				
				//鼠标放开触发事件
				box.onmouseup  = function(){
					isDown = false;
				};
			};
		</script>
	</head>
	<body>
		<div id="box"></div>
	</body>
</html>

OMiGr

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
鼠标拖拽div移动

鼠标拖拽div移动效果图：代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>鼠标拖拽div移动</title> <style> *{ margin: 0; padding: 0; } #box{ width: 100px; height: 100px; position:
复制链接

扫一扫