欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

跨浏览器拖动HTML元素

程序员文章站 2022-07-08 07:58:50
...

一 代码

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);
	}
}
 
二 运行结果

跨浏览器拖动HTML元素
            
    
    博客分类: JavaScript 浏览器HTML 
 
  • 跨浏览器拖动HTML元素
            
    
    博客分类: JavaScript 浏览器HTML 
  • 大小: 22.9 KB
相关标签: 浏览器 HTML