HTML之鼠标拖拽事件

最新推荐文章于 2024-02-17 09:28:20 发布

原创最新推荐文章于 2024-02-17 09:28:20 发布 · 949 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#鼠标 #html #事件拖拽IT

HTML 专栏收录该内容

20 篇文章

订阅专栏

本文详细探讨了HTML中的鼠标拖拽事件，如何利用这些事件创建交互式的网页元素，实现对象的拖放操作，提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

鼠标对操作对象实现拖拽：

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	<title></title>
	<style>
	body{
	margin: 0;
	padding: 0;
	}
	div{
	position: absolute;
	top: 200px;/div的y轴/
	left: 150px;/div的x轴/
	width: 300px;
	height: 200px;
	background-color: gray;
	}
	div:hover{
	cursor: move;
	}
	</style>

	<script>

	/*
	* 分析：
	* 获取鼠标实时移动的坐标；m_move_x,m_move_y
	* 鼠标按下时的坐标；m_down_x,m_down_y
	* div的坐标；dx,dy
	* 鼠标按下时，鼠标与div的偏移量；md_x,md_y
	* div的新坐标；ndx,ndy
	*/

	var isDown = false;//记录鼠标状态
	var move_div ;//要操作的div对象
	var m_move_x,m_move_y,m_down_x,m_down_y,dx,dy,md_x,md_y,ndx,ndy;

	//鼠标按下
	function down(){
	move_div = document.getElementById("move_div");
	isDown = true;

	//获取鼠标按下时坐标
	m_down_x = event.pageX;
	m_down_y = event.pageY;

	//获取div坐标
	dx = move_div.offsetLeft;
	dy = move_div.offsetTop;

	//获取鼠标与div偏移量
	md_x = m_down_x - dx;
	md_y = m_down_y - dy;
	}

	//鼠标移动
	function move(){
	move_div = document.getElementById("move_div");

	//实时更新div的坐标
	dx = move_div.offsetLeft;
	dy = move_div.offsetTop;

	//获取鼠标移动实时坐标
	m_move_x = event.pageX;
	m_move_y = event.pageY;

	//鼠标按下时移动才触发
	if(isDown){

	//获取新div坐标，鼠标实时坐标 - 鼠标与div的偏移量
	ndx = m_move_x - md_x;
	ndy = m_move_y - md_y;

	//把新div坐标值赋给div对象
	move_div.style.left = ndx+"px";
	move_div.style.top = ndy+"px";

	}

	}

	//鼠标释放
	function up(){
	isDown = false;
	}


	</script>


	</head>
	<body>
	<div id="move_div" onmousedown="down()" onmouseup="up()" onmousemove="move()"></div>
	</body>
	</html>