原生js实现拖拽图片

最新推荐文章于 2024-06-27 16:14:54 发布

returnadsss

最新推荐文章于 2024-06-27 16:14:54 发布

阅读量301

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/returnadsss/article/details/122472464

版权

代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		body{
			position: relative;
		}
		img{
			position: absolute;			
		}
	</style>
</head>
<body>
	<div align="center"><img src="images/a7.png" alt="picture"/></div>
	<script>
		let oImg=document.getElementsByTagName("img")[0];
		let offsetX,offsetY;
		let drag=0;
		oImg.onmousedown=function(e){
			e.preventDefault();
			drag=1;
			offsetX=e.offsetX;
			offsetY=e.offsetY;
		}
		document.onmousemove=function(e){
			e.preventDefault();
			if(drag==1){
			oImg.style.left=(e.pageX-offsetX)+"px";
			oImg.style.top=(e.pageY-offsetY)+"px";
			}
		}
		oImg.onmouseup=function(e){
			e.preventDefault();
			drag=0;
		}
	</script>
</body>
</html>

returnadsss

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
原生js实现拖拽图片

代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{ margin: 0; padding: 0;
复制链接

扫一扫