图片拖拽

图片效果如下：

// 设置draggable属性为false --然后给photos这个盒子设置相对定位属性
// <img src="eye.png" alt="eye" draggable="false"> 添加决对定位属性
<h1>请拖拽图片到相应位置上</h1>
<div class="photos">
	<img src="pudding.jpg" alt="pudding" draggable="false">
	<img src="eye.png" alt="eye" draggable="false">
</div>
           

js代码如下：

<section>
			<h1>请拖拽图片到相应位置上</h1>
			<div class="photos">
				<img src="pudding.jpg" alt="pudding" draggable="false">
				<img src="eye.png" alt="eye" draggable="false">
			</div>
		</section>
		<script type="text/javascript">
			const h1 = document.querySelector('h1');
			const photos = document.querySelector('div.photos');
			const eye = document.querySelector("img[alt='eye']");
			const photosLeft = photos.offsetLeft;
			const photosTop = photos.offsetTop;
			console.log(eye, 'eye');
			// 给小图片添加鼠标按下事件
			eye.addEventListener('mousedown', (e) => {
				console.log(111);
				// 计算眼睛的当前位置
				const eyeLeft = e.pageX - photosLeft - eye.offsetLeft;
				const eyeTop = e.pageY - photosTop - eye.offsetTop;
				// 鼠标移动
				function moving(e) {
					eye.style.left = e.pageX - photosLeft - eyeLeft + 'px';
					eye.style.top = e.pageY - photosTop - eyeTop + 'px';
				}
				// 鼠标按下之后添加鼠标移动事件
				eye.addEventListener('mousemove', moving)
				// // 鼠标移动之后添加鼠标弹起事件
				eye.addEventListener('mouseup', (e) => {
					// console.log(eye, 'shubiao', document)
					console.log(eye.offsetTop,'121');
					if(eye.offsetLeft > 470 && eye.offsetLeft < 490 && eye.offsetTop > 47 && eye.offsetTop < 53) {
						h1.innerHTML = '验证成功';
						h1.style.backgroundColor = '#32e0c4';
					} else {
						h1.innerHTML = '搞错位置啦';
						h1.style.backgroundColor = 'red';
					}
					// 移除鼠标事件
					document.removeEventListener('mousemove', moving, false);
				})
			})
           

然后就可以看到最开始看到的效果啦