35、JavaScript中DIV的完美拖拽---解决拖拽中的文字选中的问题

最新推荐文章于 2025-06-01 17:45:00 发布

Bwz_Learning

最新推荐文章于 2025-06-01 17:45:00 发布

阅读量5.8k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： JavaScript_Bak 文章标签： Javascript DIV的拖拽

本文链接：https://blog.youkuaiyun.com/zbw18297786698/article/details/51720334

JavaScript_Bak 专栏收录该内容

49 篇文章

订阅专栏

本文介绍了一个简单的拖拽功能实现方案，特别关注了不同浏览器（如IE、Firefox和Chrome）下的兼容性问题。通过使用JavaScript监听鼠标事件并进行相应处理，实现了元素在网页中的自由拖动。文中还详细讨论了如何在IE下利用事件捕获和释放来解决拖拽问题。

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

1、拖拽中的文字选中问题

1.1 阻止默认事件

1.2 IE下拖拽有问题

-- 事件捕获

2、代码

<head>
<style>
#div1 {width:100px; height:100px; background:red; position:absolute;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
window.onload=function ()
{
	var oDiv=document.getElementById('div1');
	
	oDiv.onmousedown=function (ev)
	{
		var oEvent=ev||event;
		var disX=oEvent.clientX-oDiv.offsetLeft;
		var disY=oEvent.clientY-oDiv.offsetTop;
		
		if(oDiv.setCapture)
		{
			oDiv.onmousemove=fnMove;
			oDiv.onmouseup=fnUp;
			
			oDiv.setCapture();
		}
		else
		{
			document.onmousemove=fnMove;
			document.onmouseup=fnUp;
		}
		
		function fnMove(ev)
		{
			var oEvent=ev||event;
			
			oDiv.style.left=oEvent.clientX-disX+'px';
			oDiv.style.top=oEvent.clientY-disY+'px';
		}
		
		function fnUp()
		{
			this.onmousemove=null;
			this.onmouseup=null;
			//用于处理IE下的问题
			if(this.releaseCapture)
			{
				this.releaseCapture();
			}
		}
		//用于处理FF和Chrome下的问题
		return false;
	};
};
</script>
</head>

<body>
asdfas
<div id="div1">
asdfs
</div>
zcvx
</body>
</html>