跨浏览器可拖动的Div (2011-11-27)

最新推荐文章于 2024-09-14 18:52:56 发布

Jsheng

最新推荐文章于 2024-09-14 18:52:56 发布

阅读量107

点赞数

分类专栏： Javascript 文章标签： xhtml javascript ViewUI

本文链接：https://blog.csdn.net/lanjiasheng/article/details/84090200

版权

Javascript 专栏收录该内容

36 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	</head>
	
	<body>
		<div style='width:210px;height:200px;border:1px solid black;margin:0;padding:0;overflow:hidden'>
			<input type='text' id='test' value=""></input>
			<div style='background-color:#416ea5' οnmοusedοwn='drag(this.parentNode,event)'><h3>点我拖动</h3></div>
		</div>
	</body>
	<script language="javascript">
		function drag(target,event){
			
			//设置成absolute
			target.style.position='absolute';
			
			//定义开始时鼠标的位置(相对于window坐标系)
			var startX=event.clientX;
			var startY=event.clientY;
			
			//定义要被拖动的对象的位置(相对于document坐标系)
			//if(target.position=='absolute')
			var objX=target.offsetLeft;
			var objY=target.offsetTop;
			
			//计算window和document之间的偏移量
			var deltaX=startX-objX;
			var deltaY=startY-objY;
			
			
			//DOM2 浏览器
			if(document.addEventListener){
				//事件传播需要经历两个阶段捕获阶段和冒泡阶段,true为监听捕获阶段
				document.addEventListener('mousemove',moveHandler,true);
				document.addEventListener('mouseup',upHandler,true);
			}
			else if(document.attachEvent){
				//针对IE的
				
				//设置元素直接捕获事件 不再冒泡
				target.setCapture();
				target.attachEvent('mousemove',moveHandler);
				target.attachEvent('mouseup',upHandler);
				
				//失去捕获事件也当成鼠标松开处理
				target.attachEvent('onlosecapture',upHandler);
				
			}
			
			//阻止事件传播
			stopProp(event);
			
			//取消事件默认行为
			if(event.preventDefault){
				//DOM2
				event.preventDefault();
			}
			else{
				event.returnValue=false;
			}
		
		//鼠标拖动
		function moveHandler(evt){
			if(!evt)evt=window.event;
			//设定位置
			var x=evt.clientX-deltaX,y=evt.clientY-deltaY;
			
			
			var R=(getPageSize()[1]-target.offsetWidth-10);
			var B=getPageSize()[0]-target.offsetHeight;
			
			//设定边界
			target.style.left=x<0?0:(x>R?R:x)+'px';
			target.style.top=y<0?0:(y>B?B:y)+'px';
			
			//test
			var test=document.getElementById('test');
			
			test.value=target.style.left+','+target.style.top+'|'+R+','+B;
			
			//阻止事件传播
			stopProp(evt);
			
		}
		
		//鼠标松开
		function upHandler(evt){
			if(!evt)evt=window.event;
			//取消绑定DOM2
			if(document.removeEventListener){
				document.removeEventListener('mouseup',upHandler,true);
				document.removeEventListener('mousemove',moveHandler,true);
				
			}
			else if(document.detachEvent){
				//失去捕获事件也当成鼠标松开处理
				target.detachEvent('onlosecapture',upHandler);
				target.detachEvent('mouseup',upHandler);
				target.detachEvent('mousemove',moveHandler);
				
				target.releaseCapture();
			}
			//阻止传播
			stopProp(evt);
		}
		
		//阻止事件传播
		function stopProp(evt){
			//DOM2
			if(evt.stopPropagation){
				evt.stopPropagation();
			}
			else{
				//IE
				evt.cancleBubble=true;
			}
		}
		
		
	}
	
	
	//跨浏览器取得当前页面的高度(H,W)
	function getPageSize(){
         //检测浏览器的渲染模式
         var body = (document.compatMode&&document.compatMode.toLowerCase() == "css1compat")?document.documentElement:document.body;
 
        var bodyOffsetWidth = 0;
         var bodyOffsetHeight = 0;
         var bodyScrollWidth = 0;
         var bodyScrollHeight = 0;
         var pageDimensions = [0,0];
        
        pageDimensions[0]=body.clientHeight; 
        pageDimensions[1]=body.clientWidth; 
       
        bodyOffsetWidth=body.offsetWidth;
         bodyOffsetHeight=body.offsetHeight;
         bodyScrollWidth=body.scrollWidth;
         bodyScrollHeight=body.scrollHeight;
 
        if(bodyOffsetHeight > pageDimensions[0])
         {
             pageDimensions[0]=bodyOffsetHeight;
         }    
       
        if(bodyOffsetWidth > pageDimensions[1])
         {
             pageDimensions[1]=bodyOffsetWidth;
         }    
        
         if(bodyScrollHeight > pageDimensions[0])
         {
             pageDimensions[0]=bodyScrollHeight; 
        }     
       
        if(bodyScrollWidth > pageDimensions[1])
         {
             pageDimensions[1]=bodyScrollWidth;
         }   

        return pageDimensions; 
}

		</script>
</html>