`
xinjiang
  • 浏览: 55512 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

js实现div的拖拽

    博客分类:
  • js
阅读更多

初学js,实现了一个div拖拽的功能,不过还有很多bug,鼠标移动的太快就div就落后了,真不知道怎么解决。郁闷。。。。

拖动时不能选中文字问题解决比较尴尬,在firefox和ie中效果比较好。但chorme中拖动时被选中的几率还是很大。没能很好的解决

<html>
<head>
	<title>简单的DIV拖动</title>
	<script type="text/javascript">
		function mydrag(id, id_title, id_content) {
			var obj = document.getElementById(id);
			var obj_title = document.getElementById(id_title);
			var obj_content = document.getElementById(id_content);
			var beginx, beginy, endx, endy;
			var isdown = false;
			function mousedown(ev)
			{
				var event = window.event || ev;  //ie与其他浏览器的兼容性
				beginx = event.clientX;
				beginy = event.clientY;
				isdown = true;
				obj.style.opacity=0.7;   //实现半透明效果
			}
			function mousemove(ev)
			{
				if(isdown){
					var event = window.event || ev;   
					endx = event.clientX;
					endy = event.clientY;
					obj.style.left = parseInt(obj.style.left)+endx-beginx;  //obj.style.left带有单位px
					obj.style.top = parseInt(obj.style.top)+endy-beginy;
					beginx = endx;   //更新坐标
					beginy = endy;
					setSelected(obj_content, false);
				}
			}
			function mouseup()
			{
				isdown = false;
				obj.style.opacity=1.0;
				setSelected(obj_content, true);
			}
			
			function setSelected(target, boo){  
				//设置文字是否可以复制boo=true时可以复制,否则禁止复制
				if (typeof target.onselectstart!="undefined"){ //IE
					target.onselectstart=function(){
						return boo;
					}  
				}else if (typeof target.style.MozUserSelect!="undefined"){ //Firefox 
					/*MozUserSelect有三个值:
					*1.none表示所有子元素都不能被选择
					*2.-moz-all子元素的所有文字都可以被选择
					*3.-moz-none子元素的所有文字都不能选择,但input除外
					*/
					if(boo)  target.style.MozUserSelect="-moz-all";
					else  target.style.MozUserSelect="none";
				}else{ //other
					target.onmousedown=function(){
						return boo;
					}
				} 
			}
			obj_title.onmousedown = mousedown;
			obj_title.onmousemove = mousemove;
			obj_title.onmouseup = mouseup;
			
			setSelected(obj_title, false);
			setSelected(obj_content,true);
		}
		window.onload=function(){
			mydrag("nav", "title");
		}
	</script>
	
	<style type="text/css">
	#nav{
		width: 800px;
		height: 100px;
		border:1px solid #92B0DD;
		background-color: #FFFFFf;
		position:absolute;  <!--position默认为静态的,所以这里必须声明为相对的或绝对的,否则无法移动-->
	}
	
	#title{
		background:#EEFAFF;
		padding:10px;
	}
	</style>
</head>

<body>
	<div id="nav" style="left:300px;top:200px;"> 
		<!--必须设置left,top的初始值,parseInt(obj.style.left||top)为空-->
		<div id="title" style="cursor:move;">我是标题</div>
		<div id="content">我是内容</title>
	</div>
</body>
</html>
分享到:
评论
2 楼 xinjiang 2011-08-04  
上传代码是上传错了,这个是调试时的代码。应该将obj改为obj2这样在拖动标题的时候才能拖动整个div,点击别处时div就不会跟着一起动。
obj.onmousedown = mousedown; 
  obj.onmousemove = mousemove; 
  obj.onmouseup = mouseup;

改为:
obj2.onmousedown = mousedown; 
  obj2.onmousemove = mousemove; 
  obj2.onmouseup = mouseup;

至于文字不能被选中的问题,下面的函数就能解决
function setSelected(target, boo){  
				//设置文字是否可以复制boo=true时可以复制,否则禁止复制
				if (typeof target.onselectstart!="undefined"){ //IE
					target.onselectstart=function(){
						return boo;
					}  
				}else if (typeof target.style.MozUserSelect!="undefined"){ //Firefox 
					/*MozUserSelect有三个值:
					*1.none表示所有子元素都不能被选择
					*2.-moz-all子元素的所有文字都可以被选择
					*3.-moz-none子元素的所有文字都不能选择,但input除外
					*/
					if(boo)  target.style.MozUserSelect="-moz-all";
					else  target.style.MozUserSelect="none";
				}else{ //other
					target.onmousedown=function(){
						return boo;
					}
				} 
			}

谢谢提醒!!!!我已经把代码改过来了
1 楼 iceloon 2011-08-04  
不可以选中文字呀,,,鼠标一拉,,DIV也跟着动

相关推荐

    JS 实现 DIV 拖拽

    JS 实现 DIV 拖拽,

    js实现div拖动

    在本主题中,我们将深入探讨如何使用纯JavaScript实现div元素的拖动功能。 首先,我们需要理解HTML中的`&lt;div&gt;`元素。`&lt;div&gt;`是一个通用的容器标签,用来组织页面内容。为了让`&lt;div&gt;`元素可以被拖动,我们需要通过...

    Javascript实现DIV拖拽和添加

    在JavaScript编程中,实现DOM元素(如DIV)的拖拽和动态添加是常见的交互功能,这对于构建具有用户友好界面的Web应用至关重要。本教程将详细讲解如何使用纯JavaScript实现这一功能,无需依赖任何外部库,如jQuery或...

    js实现div拖动功能.rar

    在JavaScript中实现div元素的拖动功能是一项常见的交互设计任务,尤其在开发Web应用程序时。这一功能让用户可以通过鼠标操作动态调整div的位置,提供了一种直观的用户界面体验。下面我们将详细探讨如何利用...

    js实现DIV拖拽布局

    在JavaScript编程中,实现DIV元素的拖拽布局是一项常见的任务,尤其在构建可交互的Web应用或自定义桌面界面时。这项技术的核心是利用事件监听和DOM操作来模拟物理世界中的拖放行为。下面我们将详细探讨如何实现这个...

    JS DIV拖动交换位置DEMO

    标题“JS DIV拖动交换位置DEMO”涉及的是JavaScript中实现动态拖动并交换HTML元素,特别是`div`元素位置的技术。在这个示例中,开发者可能想要创建一个交互式的用户界面,用户可以通过鼠标拖拽来调整`div`元素的顺序...

    js实现div拖动动画运行轨迹效果源码.zip

    在JavaScript(JS)中实现div元素的拖动和动画运行轨迹效果是一项常见的前端开发任务,主要涉及DOM操作、事件监听以及动画帧的处理。在这个项目中,`js实现div拖动动画运行轨迹效果源码.zip`包含了一个示例,帮助...

    js实现简单div拖拽功能实例.docx

    JavaScript 实现简单的 Div 拖拽功能是一种常见的交互设计,常用于网页上的可操作元素,如窗口、面板或自定义控件。以下是对这个实例的详细解析: 首先,我们需要一个包含拖拽功能的 Div 元素。在 HTML 中,我们...

    JQ JS javascript layui UI组件 元素 div 拖动插件

    本资源涉及的是一个基于jQuery(JQ)、JavaScript(JS)和layui框架的UI组件,特别关注的是元素(尤其是div)的拖动功能。拖动插件是一种常见且实用的增强交互性的工具,它允许用户通过鼠标操作移动页面上的元素,...

    .net js代码实现div拖拽功能

    通过这种方式,我们实现了在.NET环境中使用JavaScript实现的div拖拽功能。需要注意的是,这个简单的实现可能不会处理页面滚动、边界限制或与其他元素的碰撞检测等复杂情况。在实际应用中,你可能需要对代码进行扩展...

    js拖动、拖拽div大小,完美实现版

    js拖动 拖拽div大小,内部随意文件操作。完美实现版

    javaScript实现DIV简单拖拽

    javaScript实现DIV简单拖拽

    纯Javascript编写的div拖拽以及用鼠标绘制div之间连接线(包含箭头)

    纯Javascript编写的div拖拽以及用鼠标绘制div之间连接线,外部资源仅需要jquery。有以下功能: 1、创建节点 2、节点随鼠标任意拖动 3、切换拖动和画线模式 4、用鼠标绘制两个节点之间带有箭头的连线 5、连接线随节点...

    Ajax实现div拖拽

    以上就是利用Ajax实现div拖拽功能的基本原理和实现步骤。这个功能在许多交互式的Web应用中都很常见,例如在线编辑器、日历应用、画板等。通过Ajax,我们可以将用户的操作实时同步到服务器,提供更流畅的用户体验。

    js控制多个div拖拽和拖动、且能保存数据至cookie、数据库、xml

    本示例涉及的主题是“js控制多个div拖拽和拖动、且能保存数据至cookie、数据库、xml”,这是一项实用技术,尤其适用于创建交互性强的Web 2.0应用程序。下面将详细介绍这一主题的相关知识点。 首先,让我们了解...

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

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

    js实现div拖动窗口

    用js+css轻松实现网页的浮动拖动窗口。

    DIV 拖动 JS移动DIV DIV位置移动

    DIV 拖动 JS移动DIV DIV位置移动DIV 拖动 JS移动DIV DIV位置移动DIV 拖动 JS移动DIV DIV位置移动DIV 拖动 JS移动DIV DIV位置移动

    JS实现可拖动的DIV效果并限制范围区域

    利用JS实现可拖动的DIV效果,在原有基础上增加的限制在一定区域内的效果。方便,易用。可以很方便地移动到您的工程里面

Global site tag (gtag.js) - Google Analytics