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

最新推荐文章于 2024-05-24 09:45:45 发布

Bwz_Learning

最新推荐文章于 2024-05-24 09:45:45 发布

阅读量5.7k

点赞数 1

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

本文链接：https://blog.csdn.net/zbw18297786698/article/details/51720334

版权

JavaScript_Bak 专栏收录该内容

49 篇文章 0 订阅

订阅专栏

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.οnlοad=function ()
{
	var oDiv=document.getElementById('div1');
	
	oDiv.οnmοusedοwn=function (ev)
	{
		var oEvent=ev||event;
		var disX=oEvent.clientX-oDiv.offsetLeft;
		var disY=oEvent.clientY-oDiv.offsetTop;
		
		if(oDiv.setCapture)
		{
			oDiv.οnmοusemοve=fnMove;
			oDiv.οnmοuseup=fnUp;
			
			oDiv.setCapture();
		}
		else
		{
			document.οnmοusemοve=fnMove;
			document.οnmοuseup=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.οnmοusemοve=null;
			this.οnmοuseup=null;
			//用于处理IE下的问题
			if(this.releaseCapture)
			{
				this.releaseCapture();
			}
		}
		//用于处理FF和Chrome下的问题
		return false;
	};
};
</script>
</head>

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

Bwz_Learning

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
35、JavaScript中DIV的完美拖拽---解决拖拽中的文字选中的问题

1、拖拽中的文字选中问题 1.1 阻止默认事件 1.2 IE下拖拽有问题 -- 事件捕获2、代码#div1 {width:100px; height:100px; background:red; position:absolute;}无标题文档window.onload=function (){ var o
复制链接

扫一扫

专栏目录