实现网页中鼠标拖动图片在指定框中移动

最新推荐文章于 2023-05-15 20:22:03 发布

大A和小Q

最新推荐文章于 2023-05-15 20:22:03 发布

阅读量2.7k

点赞数 2

分类专栏：笔记文章标签： javascript css 开发语言

本文链接：https://blog.csdn.net/qq_47780707/article/details/121129036

版权

笔记专栏收录该内容

9 篇文章

订阅专栏

实现网页中鼠标拖动图片在指定框中移动

简单实现鼠标拖动图片在指定框内移动，使用时只需要修改html文件中对style、script、img（img自己找个图片便可）三个的引用路径。
在调试网页的时候可以在chrome浏览器中右键->检查，在source中的js文件中设置断点，还可以在watch添加监视，悬浮鼠标于选中的js变量或一小段代码段上也可查看变量或者表达式的当前值。

一、代码展示与解析

1.1 css文件

此处图片移动的边界div用内联样式的是为了能够在js中通过obj.style.top、obj.style.left、obj.style.height、obj.style.width获取div的位置（若用css定义样式则无法通过此途径获得）。若需要通过css定义样式则在js文件中应该用obj.offsetheight、obj.offsetleft等获取div位置。

//图片样式
img {
	width: 150px;
	height: 150px;
	position: absolute;
	left: 0px;
	top: 0px;
}
//div用内联样式

1.2 js文件

在window.onload的地方对网页进行初始化，如果网页控制台（可以通过chrome的检查或者其他浏览器相应功能查看console的输出）没有输出“初始化”则说明js、css、html中有地方错误使得网页不会执行初始化（window.onload），可以逐个排查。
注意数字与像素值（px结尾）不能直接比较而要用parseInt（像素值）转化为数字，如函数mousemove中所示。坐标值从网页左上角开始向右x值增大，向下y值增大。

//全局变量
var isDrag = false; //是否开始拖拽 false 不拖拽
var disX, disY; //鼠标相对于图片的位置



//初始化可以被拖动的图片
window.onload = function() {
	console.log("初始化");

	//初始化被拖动的图片
	var pic1 = document.getElementById('pic');
	enabledrag(pic1);

}

//注册拖动所需事件函数
function enabledrag(obj) {
	obj.onmousedown = mouseDown;
	obj.onmousemove = mouseMove;
	obj.onmouseup = mouseUp;
}


//鼠标按下时
function mouseDown(e) {
	isDrag = true;
	this.style.cursor = 'move';
	e = e || window.event; //兼容性写法
	//鼠标位置
	var x = e.clientX;
	var y = e.clientY;
	//鼠标相对于图片的位置
	disX = x - this.offsetLeft;
	disY = y - this.offsetTop;
}

//鼠标移动时
function mouseMove(e) {
	if (!isDrag) {
		return;
	}
	e = e || window.event; //兼容性写法
	//鼠标位置
	var x = e.clientX;
	var y = e.clientY;
	//若鼠标在框内则修改图片位置
	var filmstage = document.getElementById("filmStage");
	if (x > parseInt(filmstage.style.left) && x < parseInt(filmstage.style.left) + parseInt(filmstage.style.width) && y > parseInt(filmstage.style.top)  && y <parseInt(filmstage.style.top) + parseInt(filmstage.style.height) ) {
		console.log("11");
		this.style.left = x - disX + 'px';
		this.style.top = y - disY + 'px';
	}
	//若鼠标超出框则视为抬起
	else{
		isDrag = false;
		this.style.cursor = "default";
	}


}

//鼠标抬起时
function mouseUp(e) {
	isDrag = false;
	this.style.cursor = 'default';
}

1.3 html文件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		@import url("css/images.css");
	</style>
	<script type="text/javascript" src="js/Dragimage.js">
	</script>

</head>
<body>
	<div id="filmStage" style="width: 300px; height: 300px; border-color:blue;border-style:solid; border-width:1;left: 0px;top: 0px;">	
		<img src="img/图片1.jpg" id='pic' draggable='false'>
	</div>

</body>
</html>