跨浏览器拖动HTML元素

实现HTML拖放效果

最新推荐文章于 2025-09-06 04:41:10 发布

原创最新推荐文章于 2025-09-06 04:41:10 发布 · 170 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#浏览器 #HTML

JavaScript 专栏收录该内容

188 篇文章

订阅专栏

本文介绍了一种使用HTML和JavaScript实现元素拖放效果的方法。通过简单的HTML结构配合自定义JavaScript函数，可以轻松创建可拖动的窗口和图片，适用于各种交互式网页应用。

一代码

HTML代码：

<!DOCTYPE html>
<html>
<head>
	<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
	<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
	<title> 拖放效果 </title>
</head>
<body>
<!-- 导入JavaScript脚本文件 -->
<script src="drag.js"></script>
<!-- 定义被拖放的元素 -->
<div style="position:absolute;
			left:120px;
			top:150px;
			width:250px; 
			border:1px solid black;">
	<div style="background-color:#416ea5; 
				width:250px;
				height:22px;
				cursor:move;
				font-weight:bold;
				border-bottom:1px solid black;"
		onmousedown="drag(this.parentNode, event);">
		可拖动标题
	</div>
	<p>可被拖动的窗口</p>
	<p>窗口内容</p>
</div>
<!-- 定义一个可拖动的图片 -->
<img src="image/logo.jpg" alt="按住Shift可拖动"
	style="position:absolute;"
	onmousedown="if (event.shiftKey) drag(this, event);" />
</body>
</html>

JS代码：

var drag = function(target, event)
{
	// 定义开始拖动时的鼠标位置（相对window座标）
	var startX = event.clientX;
	var startY = event.clientY;
	// 定义将要被拖动元素的位置（相对于document座标）
	// 因为该target的position为absolutely，
	// 所以我们认为它的座标系是基于document的
	var origX = target.offsetLeft;
	var origY = target.offsetTop;
	// 因为后面根据event的clientX、clientY来获取鼠标位置时，
	// 只能获取windows座标系的位置，所以需要计算window座标系
	// 和document座标系的偏移。
	// 计算windows座标系和document座标系之间的偏移
	var deltaX = startX - origX;
	var deltaY = startY - origY;
	// 鼠标松开的事件处理器
	var upHandler = function(evt) 
	{
		// 对于IE事件模型，获取事件对象
		if (!evt) evt = window.event; 
		// 取消被拖动对象的鼠标移动（mousemove）和鼠标松开（mouseup）的事件处理器
		if (document.removeEventListener)
		{
			// DOM事件模型
			// 取消在事件捕获阶段的事件处理器
			document.removeEventListener("mouseup", upHandler, true);
			document.removeEventListener("mousemove", moveHandler, true);
		}
		else if (document.detachEvent) 
		{
			target.detachEvent("onlosecapture", upHandler);
			target.detachEvent("onmouseup", upHandler);
			target.detachEvent("onmousemove", moveHandler);
			target.releaseCapture( );
		}
		// 阻止事件传播
		stopProp(evt);
	}
	// 阻止事件传播(该函数可以跨浏览器)
	var stopProp = function(evt)
	{
		// DOM事件模型
		if (evt.stopPropagation)
		{
			evt.stopPropagation( );
		}
		// IE事件模型
		else
		{
			evt.cancelBubble = true;
		}
	}
	// 为被拖动对象的鼠标移动（mousemove）和鼠标松开（mouseup）注册事件处理器
	if (document.addEventListener)
	{
		// DOM事件模型
		// 在事件捕获阶段绑定事件处理器
		document.addEventListener("mousemove", moveHandler, true);
		document.addEventListener("mouseup", upHandler, true);
	}
	else if (document.attachEvent) 
	{
		// IE事件模型
		// 设置该元素直接捕获该事件
		target.setCapture();
		// 为该元素鼠标移动时绑定事件处理器
		target.attachEvent("onmousemove", moveHandler);
		// 为鼠标松开时绑定事件处理器
		target.attachEvent("onmouseup", upHandler);
		// 将失去捕获事件当成鼠标松开处理。
		target.attachEvent("onlosecapture", upHandler);
	}
	// 阻止事件传播
	stopProp(event);
	// 取消事件默认行为
	if (event.preventDefault)
	{
		// DOM事件模型
		event.preventDefault( ); 
	}
	else
	{
		// IE事件模型
		event.returnValue = false;
	}
	// 鼠标移动的事件处理器
	function moveHandler(evt)
	{
		// 对于IE事件模型，获取事件对象
		if (!evt) evt = window.event; 
		// 将被拖动元素的位置移动到当前鼠标位置。
		// 先将window座标系位置转换成document座标系位置，再修改目标对象的CSS位置。
		target.style.left = (evt.clientX - deltaX) + "px";
		target.style.top = (evt.clientY - deltaY) + "px";
		// 阻止事件传播
		stopProp(evt);
	}
}

二运行结果