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

蔚落 2022-09-21 13:04 285阅读 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>

发表评论取消回复

表情：

评论列表（有 0 条评论，285人围观）

还没有评论，来说两句吧...

相关阅读

相关用js拖拽div

描述：拖拽div元素，主要用到以下三个事件 onmousedown onmousemove onmouseup 当拖拽网页中的内容时，浏览器会默认搜索引擎

ゝ一纸荒年。/ 2022年11月29日 14:30/ 0 赞/ 255 阅读

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

1、拖拽中的文字选中问题 1.1 阻止默认事件 1.2 IE下拖拽有问题 -- 事件捕获 2、代码

蔚落/ 2022年09月21日 13:04/ 0 赞/ 286 阅读

相关 30、JavaScript中简单拖拽DIV的实现

1、DIV拖拽的实现 1.1 简易拖拽 .拖拽原理 --距离不变

喜欢ヅ旅行/ 2022年09月21日 11:51/ 0 赞/ 183 阅读

相关 Jquery实现div拖拽

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR

ゞ浴缸里的玫瑰/ 2022年06月08日 06:05/ 0 赞/ 195 阅读

相关 Android中的拖拽

转载请注明链接：[https://blog.csdn.net/feather\_wch/article/details/79736307][https_blog.csdn.ne

傷城~/ 2022年05月28日 03:48/ 0 赞/ 219 阅读

相关原生JavaScript实现div拖拽效果

实现思路：（1）首先改变被拖动元素的布局属性为“position：absolute”，其父框为“position：relative”；（2）捕捉鼠标事件“mo

分手后的思念是犯贱/ 2022年05月24日 03:43/ 0 赞/ 309 阅读

相关 js拖拽div移动

js拖拽div移动,就是鼠标点击住div，根据鼠标的位置来改变div的位置如有转载，请标明来自此出处http://blog.csdn.net/qxs965266509，必

拼搏现实的明天。/ 2022年05月13日 00:08/ 0 赞/ 256 阅读

相关 javascript之div的拖拽

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></t

叁歲伎倆/ 2022年04月18日 05:11/ 0 赞/ 212 阅读

相关 javascript 完美拖拽

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

Love The Way You Lie/ 2021年11月11日 04:32/ 0 赞/ 336 阅读

相关 js拖拽div例子

1.demo.html \-------------------------------- <!doctype html> <!--\[if IE 7 \]>

客官°小女子只卖身不卖艺/ 2021年11月01日 03:34/ 0 赞/ 330 阅读