JavaScript中拖拽图片

最新推荐文章于 2023-01-30 22:01:36 发布

plannothing

最新推荐文章于 2023-01-30 22:01:36 发布

阅读量515

点赞数

分类专栏： js基础教程文章标签： js javascript css html

本文链接：https://blog.csdn.net/plannothing/article/details/108063015

版权

本文介绍了如何使用JavaScript在浏览器环境中实现图片的拖放功能，通过设置事件监听和捕获，结合CSS与HTML，允许用户在页面上拖动图片。

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

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title></title>
	<style type="text/css">
		
		#box1{
			width: 100px;
			height: 100px;
			background-color: red;
			position: absolute;
		}
		#box2{
			width: 100px;
			height: 100px;
			background-color: yellow;
			position: absolute;
			left: 200px;
			top:200px;
		}
	</style>
	
	<script type="text/javascript">
		
		window.onload = function(){
			/*
			 * 拖拽box1的元素
			 *  - 拖拽的流程
			 *  	1.当鼠标在被拖拽的元素上按下时开始拖拽 onmousedown
			 * 		2.当鼠标移动时被拖拽的元素跟随鼠标移动 onmousemove
			 * 		3.当鼠标松开时被拖拽的对象固定到当前位置 onmouseup
			 */
			
			//获取box1
			
			var box1 = document.getElementById("box1")
			var box2 = document.getElementById("box2")
			
			var img01 = document.getElementById("img1")
			//为box1绑定一个鼠标按下的事件
			
			//开启box1的拖拽
			drag(box1);
			//开启box2的拖拽
			drag(box2);
			//开启img1的拖拽
			drag(img01);