`

跨浏览器可拖动的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应当去掉
评论
发表评论

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

相关推荐

    鼠标拖动divjquery-ui-1.11.0.rar

    标题中的“鼠标拖动divjquery-ui-1.11.0.rar”指的是一个使用jQuery UI库实现的鼠标拖动功能的示例项目。这个压缩包包含了一个基于jQuery UI 1.11.0版本的代码资源，允许用户通过鼠标拖动HTML元素，如div，以实现...

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

    "可拖动div层"是这样的一个功能，它允许开发者创建一个浮动且可操作的div元素，通常用于弹出式窗口、对话框或者提示信息。这个功能在jQuery库的支持下，可以实现跨浏览器的兼容性，包括Internet Explorer（IE）、...

    jquery 跨iframe拖拽

    2. **设置拖拽元素**：在主页面或者IFrame中的某个元素（比如一个div）上，我们需要应用`.draggable()`方法，定义拖动行为。例如： ```javascript $('#draggableElement').draggable(); ``` 这将使`#...

    拖拽+拖拽改变div大小

    在网页开发中，"拖拽+拖拽改变div大小"是一种常见的交互设计，它允许用户通过鼠标拖动来调整div元素的尺寸。这种功能在创建可定制的布局、图形编辑工具或者任何需要用户自定义区域大小的应用中非常有用。本文将深入...

    jQuery可拖拽DIV页面

    本项目“jQuery可拖拽DIV页面”利用jQuery及其扩展插件jQuery UI，实现了一个用户界面元素（如div）可以被拖动的功能，从而为用户提供更直观的交互体验。以下是对这个知识点的详细讲解： 1. **jQuery基础**：jQuery...

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

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

    拖动多个div

    在标题“拖动多个div”中，我们关注的是如何使一个或多个 `div` 元素变得可拖动，即用户可以通过鼠标进行交互，自由地在页面上移动这些元素。这种功能在构建各种交互式界面时非常有用，例如，可以用于创建可自定义...

    asp.net中实现可拖动div

    在ASP.NET中实现一个可拖动的div是提高用户界面交互性和用户体验的有效方式，尤其当需要替代传统的alert对话框时，可拖动div能提供更加灵活和友好的用户体验。 首先，要实现可拖动的div，我们需要理解HTML和CSS的...

    DIV可移动 可实现任意拖动放大缩小

    标题中的“DIV可移动 可实现任意拖动放大缩小”是指一种使用JavaScript技术来实现的交互功能，允许用户在网页上自由地拖动、缩放HTML中的div元素。这一功能通常用于创建用户界面元素，如窗口、面板或者任何需要动态...

    js拖动div并拖动DIV的大小

    不同浏览器对事件处理和DOM操作的支持可能存在差异，需要考虑跨浏览器的兼容性。例如，IE和其他现代浏览器可能使用不同的方式来获取和设置CSS属性。 11. **优化用户体验**： 添加视觉反馈，如鼠标形状改变，以...

    拖动div到另一个div中

    标题“拖动div到另一个div中”描述的就是这样一个功能，即实现一个div元素能够被拖动并放置到另一个div内，同时显示被拖动div的ID。这个功能在各种应用场景中都很有用，如文件管理器、布局构建器或富文本编辑器等。 ...

    javascript浮动div，可拖拽div,遮罩层(div和iframe实现)

    可拖拽 Div 指的是用户可以手动拖动 Div 在页面中的位置。这一功能通常采用原生 JavaScript 实现。 #### 实现步骤 1. **绑定事件监听器**：为 Div 绑定 `mousedown` 事件，当用户按下鼠标左键时触发。 2. **获取...

    js拖拽排序-可以拖拽的DIV.rar

    在JavaScript（JS）中，实现一个可拖拽排序的DIV元素功能是一项常见的需求，尤其是在构建交互性强的Web应用时。这个“js拖拽排序-可以拖拽的DIV.rar”文件很可能是包含了一个或多个示例代码，用于演示如何在HTML页面...

    html 拖动div进行相应顺序的排序，亲测可用，简单方便

    在拖放排序的场景中，HTML将创建一系列可拖动的div元素，每个元素代表待排序的一个项目。例如： ```html &lt;div id="item1" class="draggable"&gt;Item 1&lt;/div&gt; &lt;div id="item2" class="draggable"&gt;Item 2&lt;/div&gt; &lt;div id...

    拖动div 内部有滚动条

    6. **浏览器兼容性**：不同的浏览器可能对某些CSS属性和JavaScript事件处理有不同的支持，因此在编写代码时要考虑跨浏览器兼容性，可能需要引入如jQuery等库来简化处理。 7. **响应式设计**：如果项目需要适应不同...

    JavaScript可拖动DIV

    JavaScript可拖动DIV是一种常见的网页交互功能，它允许用户通过鼠标拖动来改变网页上某个元素（通常是div）的位置。这种技术在构建交互式界面、拖放式操作、地图应用等场景中非常常见。在本篇文章中，我们将深入探讨...

    基于bootstrap和jquery的可拖拽移动div，可预览的页面生成器

    标题中的“基于bootstrap和jquery的可拖拽移动div，可预览的页面生成器”指的是一个Web开发工具，它利用Bootstrap框架和jQuery库构建，允许用户通过拖拽和放置的方式设计网页布局，并实时预览编辑效果。Bootstrap是...

    复制并拖拽Div

    在网页开发中，"复制并拖拽Div"是一种常见的交互设计技术，主要涉及HTML和JavaScript的运用。HTML作为页面的基础结构语言，而JavaScript则提供了动态交互的能力。在本主题中，我们将深入探讨如何实现这个功能。 ...

    jquery 可拖动浮动DIV ，可固定DIV

    本主题将深入探讨如何使用jQuery实现一个可拖动并可固定在页面上的浮动DIV元素。 首先，让我们理解“浮动DIV”。在HTML中，浮动（float）属性常用于布局，使元素可以向左或向右移动，以便其他内容可以环绕它。在CSS...

    jquery div拖动排序效果代码.zip

    本教程将详细讲解如何利用jQuery实现一个div元素的拖动排序效果，结合CSS样式，创建出一款从左到右慢慢展开且可自由拖动排序的特效。 首先，我们需要在HTML中设置好基础结构。创建一系列的div元素，每个div代表一个...

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