拖动效果封装已经修改，适应火狐

以下为详细代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>拖动效果 封装 已经修改，适应火狐</title>
<style type="text/css">

</style>
<script type="text/javascript">
/*
十三妖
qq:181907667
msn:wl181907667@hotmail.com
邮箱:thirdteendevil@163.com
*/
function dragClass(){
	this.mouseState = document.all ? 1 : 0 ;
	this.x;
	this.y;
	this.dragId = null;
	this.index = 100;
	document.onselectstart = function(){return false;};
}
dragClass.prototype = {
	dragStar:function(dragId,moveId){//拖动入口函数
		var _this = this;	
		_this.$(dragId).style.cursor = "move";	
		_this.$(dragId).onmousedown = function(e){
			var e = e ? e : event;
			//_this.$(moveId).style.zIndex = _this.index++;
			if(e.button == _this.mouseState)
			{
				_this.setDragInfo(e,moveId,moveId);
				_this.dragPro(moveId);
			}			
		},
		_this.$(moveId).onmousedown = function(e){
			_this.$(moveId).style.zIndex = _this.index++;
		},		
		_this.$(dragId).onmouseup = function(){
			_this.clearDragId();
		}
		document.onmouseup = function(){
			_this.clearDragId();
		}
	},
	setDragInfo:function(e,dragId,moveId){//拖动初始化
		this.x = e.clientX;
		this.y = e.clientY;
		this.dragId = dragId;
		if(this.$(moveId).style.position != "absolute")
		{
			this.$(moveId).style.width = this.$(moveId).offsetWidth + "px";	
			this.$(moveId).style.height = this.$(moveId).offsetHeight + "px";
			this.$(moveId).style.position = "absolute";
			this.$(moveId).style.left = this.$(moveId).offsetLeft + "px";
			this.$(moveId).style.top = this.$(moveId).offsetTop + "px";
		}				
	},
	clearDragId:function(){ //清除拖动ID
		this.dragId = null;
	},
	dragPro:function(moveId){
		var _this = this;
		document.onmousemove = function(e){
			var e = e ? e : event;
			if(e.button == _this.mouseState && _this.dragId != null)
			{
				var x = e.clientX;
				var y = e.clientY;
				//_this.$(moveId).style.left = (_this.$(moveId).offsetLeft + (x - _this.x)) + "px";
				//_this.$(moveId).style.top = (_this.$(moveId).offsetTop + (y - _this.y)) + "px";
				_this.$(moveId).style.left = (parseInt(_this.$(moveId).style.left) + (x - _this.x)) + "px";
				_this.$(moveId).style.top = (parseInt(_this.$(moveId).style.top) + (y - _this.y)) + "px";
				_this.x = x;
				_this.y = y;
				//alert(_this.$(dragId).style.left);
			}
			
		}
	},
	$:function(o){//获取对象
		if(typeof(o) == "string")
		{
			if(document.getElementById(o))
			{
				return document.getElementById(o);
			}
			else
			{
				alert("errId \""+ o + "\"!");
				return false;
			}
		}
		else
		{
			return o;
		}
	}
}
window.onload = function(){
	var c = new dragClass();
	c.dragStar("b","a");
	c.dragStar("d","c");
}
</script>
</head>
<body>
<div class="bodyer">
	<h1 class="t_rt">
		鼠标拖动层封装类
	</h1>
	
	<h2>
		效果预览
	</h2>
	
	<div class="preview">
		<div class="scrolldoorFrame">
			<div id="a" style="width:200px;height:150px;background:#FFF;border:1px solid #DDD;">
				<div id="b" style="height:20px;margin:1px;line-height:22px;overflow:hidden;background:#999;font-size:12px;font-weight:bold;color:#FFF;padding-left:15px;">
				拖动层1
				</div>
				&nbsp;&nbsp;&nbsp;&nbsp;移动层
			</div>
			
			<div id="c" style="width:200px;height:150px;background:#FFF;border:1px solid #DDD;">
				<div id="d" style="height:20px;margin:1px;line-height:22px;overflow:hidden;background:#999;font-size:12px;font-weight:bold;color:#FFF;padding-left:15px;">
				拖动层2
				</div>
				&nbsp;&nbsp;&nbsp;&nbsp;移动层
			</div>
		</div>
	</div>
	
	<h2>
		源代码
	</h2>
	
	<div class="textDiv">
		<textarea id="sourse">
function dragClass(){
	this.mouseState = document.all ? 1 : 0 ;
	this.x;
	this.y;
	this.dragId = null;
	this.index = 100;
	document.onselectstart = function(){return false;};
}
dragClass.prototype = {
	dragStar:function(dragId,moveId){//拖动入口函数
		var _this = this;	
		_this.$(dragId).style.cursor = "move";	
		_this.$(dragId).onmousedown = function(e){
			var e = e ? e : event;
			//_this.$(moveId).style.zIndex = _this.index++;
			if(e.button == _this.mouseState)
			{
				_this.setDragInfo(e,moveId,moveId);
				_this.dragPro(moveId);
			}			
		},
		_this.$(moveId).onmousedown = function(e){
			_this.$(moveId).style.zIndex = _this.index++;
		},		
		_this.$(dragId).onmouseup = function(){
			_this.clearDragId();
		}
		document.onmouseup = function(){
			_this.clearDragId();
		}
	},
	setDragInfo:function(e,dragId,moveId){//拖动初始化
		this.x = e.clientX;
		this.y = e.clientY;
		this.dragId = dragId;
		if(this.$(moveId).style.position != "absolute")
		{
			this.$(moveId).style.width = this.$(moveId).offsetWidth + "px";	
			this.$(moveId).style.height = this.$(moveId).offsetHeight + "px";
			this.$(moveId).style.position = "absolute";
			this.$(moveId).style.left = this.$(moveId).offsetLeft + "px";
			this.$(moveId).style.top = this.$(moveId).offsetTop + "px";
		}				
	},
	clearDragId:function(){ //清除拖动ID
		this.dragId = null;
	},
	dragPro:function(moveId){
		var _this = this;
		document.onmousemove = function(e){
			var e = e ? e : event;
			if(e.button == _this.mouseState && _this.dragId != null)
			{
				var x = e.clientX;
				var y = e.clientY;
				//_this.$(moveId).style.left = (_this.$(moveId).offsetLeft + (x - _this.x)) + "px";
				//_this.$(moveId).style.top = (_this.$(moveId).offsetTop + (y - _this.y)) + "px";
				_this.$(moveId).style.left = (parseInt(_this.$(moveId).style.left) + (x - _this.x)) + "px";
				_this.$(moveId).style.top = (parseInt(_this.$(moveId).style.top) + (y - _this.y)) + "px";
				_this.x = x;
				_this.y = y;
				//alert(_this.$(dragId).style.left);
			}
			
		}
	},
	$:function(o){//获取对象
		if(typeof(o) == "string")
		{
			if(document.getElementById(o))
			{
				return document.getElementById(o);
			}
			else
			{
				alert("errId \""+ o + "\"!");
				return false;
			}
		}
		else
		{
			return o;
		}
	}
}
		</textarea>
	</div>
	
	<h2>
		使用方法
	</h2>
	
  <div class="preview">
		1.把以上代码引进你的页面 &lt;script type=&quot;text/javascript&quot; src=&quot;dragClass.js&quot;&gt;&lt;/script&gt;<br/>
		2.在页面的"&lt;/body&gt;"标签前加入以下代码:<br/>
		<div class="example">			
			&lt;script type=&quot;text/javascript&quot;&gt;<br/>
			window.onload = function(){<br />
	var c = new dragClass();//创建对象<br />
	c.dragStar(&quot;拖动id&quot;,&quot;移动层id&quot;);<br />
}<br/>
			&lt;/script&gt;
		</div>	
		其中sd方法中的参数为:<br/>
			参数一 "拖动id":鼠标经过时候鼠标样式变成移动样式模样的元素的id<br/>
			参数二 "移动层id":即将移动的元素的id<br/>	
		<span class="red">3.建议移动层是绝对定位(position:absolute;).</span>		
  </div>
	
</div>
<div class="authorInfo">
	<div class="cont">
		十三妖 ThirdteenDevil <br/>
		[qq:181907667] [msn:wl181907667@hotmail.com] [e-mail:thirdteendevil@163.com]
	</div>
</div>
</body>
</html>

前一页:漂亮的页面loading等待页面特效(3)

后一页:兼容IE和FF的收藏本站、设为首页代码

拖动效果 封装 已经修改，适应火狐

拖动效果封装已经修改，适应火狐