js实现图片拖拽效果

最新推荐文章于 2024-09-03 09:43:43 发布

qq_44801336

最新推荐文章于 2024-09-03 09:43:43 发布

阅读量1.4k

点赞数 1

分类专栏：前端文章标签： javascript

本文链接：https://blog.csdn.net/qq_44801336/article/details/104492730

版权

本文介绍如何利用JavaScript创建一个允许用户拖动图片的功能。通过监听dragstart、drag、dragover和drop事件，实现图片在指定区域内的自由拖动。此技术可以应用于各种交互式界面，提升用户体验。

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

//图片需要自己导入
<!doctype html>
<html>
 <head>
	<meta charset="UTF-8">
	<title>在当前显示区范围内实现点不到的小方块</title>
	<style>
		div{position:fixed;width:100px;height:100px;
			background-image:url(images/xiaoxin.gif);
      background-size:100%;
		}
	</style>
	
 </head>
 <body>
	<div id="pop"></div>
	<script>
		let pop = document.getElementById("pop")
		//定义开关变量,用于控制图片是否跟随鼠标移动
		let canMove = false;
		//在开始拖拽时,就保存鼠标距div左上角的相对位置
		let offsetX,offsetY;
		//当在pop上按下鼠标时
		pop.onmousedown=function(e){
			//可以开始拖动
			canMove=true;
			offsetX=e.offsetX;
			offsetY=e.offsetY;
		}
		//当鼠标在窗口移动时
		window.onmousemove=function(e){
				//只有当pop可以移动时
			if(canMove==true){
				//让pop跟随鼠标移动
				//开始拖拽时，立刻获得鼠标距图片左上角的相对位置
				//求pop的top和left
				let left=e.clientX-offsetX;
				let top=e.clientY-offsetY;
				//设置pop的top和left属性
					pop.style.left=