`

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

 
阅读更多

 

<!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' onmousedown='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>
分享到：
| XHTML的DTD应当去掉
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    js模拟浏览器 Ctrl+F 查找 + div层鼠标拖动 改变位置

    js模拟浏览器 Ctrl+F 查找 + div层鼠标拖动 改变位置 两个功能demo js模拟浏览器 Ctrl+F 查找 + div层鼠标拖动 改变位置 两个功能demo js模拟浏览器 Ctrl+F 查找 + div层鼠标拖动 改变位置 两个功能demo js模拟...

    可拖动div层，兼容IE火狐等浏览器

    基于JQuery的div层窗口，可拖动，可设置大小，兼容IE、遨游和火狐等主流浏览器。附带例子、JQuery文件，注意使用时必须引入dialog.css， 具体用法参照例子。超好使

    可拖动、可关闭、透明标题的DIV弹出窗口，完美兼容各个浏览器

    纯JS制作的可拖动、带关闭按钮、带透明标题栏的DIV弹出窗口，完美兼容IE,FF,chrome等浏览器，测试通过，里面的样式大家可以自己DIY

    JS拖拽DIV后保存位置示例

    本实例从通达OA工作桌面提取，包括js、css，浏览空白时，请将浏览器编码改为UTF-8

    JS可拖动的DIV

    JS 控制兼容 IE 火狐 谷歌 等浏览器

    HtmlDIV拖拽效果源代码

    实现div拖动，使用javascript实现的了，这个示例，大家可以尝试操作。 这对增强Web站点体验十分重要。

    javascript拖动div或table等网页元素

    用javascript拖动div或table等对象。 代码兼容各种浏览器,IE,Firefox,Opera,Safari等。 这里有三种拖动效果。

    JavaScript实现可拖拽的拖动层Div实例

    本文实例讲述了JavaScript实现可拖拽的拖动层Div。分享给大家供大家参考。具体如下： 这是一个完美的JS拖拽效果，带拖尾的JavaScript拖动层代码，经过了多次优化修正，复制节点的方法不错，值得JS爱好者学习，同时...

    js实现可拖动DIV的方法

     现在切入正题，说一下js 实现可拖动Div.实现这个功能我们先说一下思路：  1.捕捉鼠标div的mousedown事件  2.捕捉 document的 mousemove事件  3.取消事件 然后我们看一下代码： 代码如下:function Drag(id) {...

    div的position属性

    小伙伴们学习了12-6小节的绝对定位的方法：使用position:absolute可以实现被设置元素相对于浏览器（body）设置定位以后，大家有没有想过可不可以相对于其它元素进行定位呢？答案是肯定的，当然可以。使用position:...

    JS+DIV 可拖拽,弹出窗口

    JS写的可以拖拽的窗口.很好用.效果不错.上传上来供大家使用.

    div_js_mask_IE蒙板+对话框

    div+js实现的弹出对话框，调用简单，可拖动，父页面禁止并半透明。弹出框可内嵌功能页面，也可去掉“iframe”然后做成单纯的对话框。 在windowsXP sp2下的 IE8、firefox3.5、opera10、傲游、TT浏览器、搜狗浏览器、...

    jquery拖动div

    一个J2EEer自己写的拖动div的实例 在网上找了很久也没有找到一个好用的拖动div的例子，网上的要么就是浏览器不兼容要么就是拿过来没有用，于是自己花了些时间用jquery写了一个，和大家分享。绝对原创。

    react-dnd-scrollzone：用于可拖动项目的平滑滚动容器

    跨浏览器兼容的滚动容器，用于拖放交互。 import React , { Component } from 'react' ; import { DragDropContextProvider } from 'react-dnd' ; import HTML5Backend from 'react-dnd-html5-backend' ; import ...

    Vue-drag-resize 拖拽缩放插件的使用(简单示例)

    本文通过代码给大家介绍了Vue-drag-resize 拖拽缩放插件使用简单示例,代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下

    div+iframe弹出窗口：可最大化、最小化，可拖拽，带遮罩功能

    弹出窗口可最大化、最小化，可拖拽。带遮罩功能。 解决替换模态窗口，避免模态调模态出现的一系列问题：session丢失，提交返回，调父类方法层级多了或者多页面调的时候，parent层次级别问题。用iframe的话，直接可以...

    vue实现页面内容禁止选中功能,仅输入框和文本域可选

    上网上翻了翻，共找到两种... /*webkit浏览器*/ -khtml-user-select:none; /*早期浏览器*/ -moz-user-select:none;/*火狐*/ -ms-user-select:none; /*IE10*/ user-select:none; } input{ -webkit-user-select:au

    js实现悬浮可拖动登录窗口(demo)

    dropDiv2.0是我在拖拽div例子的基础上改进的例子。相对于拖拽例子，这里增添了event浏览器兼容性处理、禁鼠标选中的一些机制。

    纯CSS实现左右拖拽改变布局大小

    利用浏览器非overflow:auto元素设置resize可以拉伸的特性实现无JavaScript的分栏宽度控制。 webkit浏览器下滚动条可以自定义，其中resize区域大小就是scrollbar的大小，于是，我们可以将整个拉伸区域变成和容器一样...

    《精通CSS+DIV网页样式与布局》光盘源码

    　第11章　CSS+div布局方法剖析　 　11.1　CSS排版观念　 　11.2　固定宽度且居中的版式 　11.3　左中右版式　 　11.4　块的背景色问题 　11.5　排版实例：电子相册　 　11.6　div排版与传统的表格方式排版的分析　 ...

Magicbox
Global site tag (gtag.js) - Google Analytics