js兑现div的拖拽-JavaSript-爱易网页

js兑现div的拖拽

日期：2014-05-16　浏览次数：20368 次

js实现div的拖拽

初学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>

1 楼 iceloon 2011-08-04

不可以选中文字呀，，，鼠标一拉，，DIV也跟着动

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=fu

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

js兑现div的拖拽

相关资料更多>

推荐阅读更多>