国产精品97在线,成人中文视频,欧美一区日韩一区

拖動(dòng)效果封裝已經(jīng)修改，適應(yīng)火狐

藍(lán)色理想 2009/5/2 21:35:40 深山行者字體:大中小瀏覽 12683

以下為詳細(xì)代碼

<!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>拖動(dòng)效果 封裝 已經(jīng)修改，適應(yīng)火狐</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){//拖動(dòng)入口函數(shù)
		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){//拖動(dòng)初始化
		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(){ //清除拖動(dòng)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){//獲取對(duì)象
		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">
		鼠標(biāo)拖動(dòng)層封裝類
	</h1>
	
	<h2>
		效果預(yù)覽
	</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;">
				拖動(dòng)層1
				</div>
				&nbsp;&nbsp;&nbsp;&nbsp;移動(dòng)層
			</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;">
				拖動(dòng)層2
				</div>
				&nbsp;&nbsp;&nbsp;&nbsp;移動(dòng)層
			</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){//拖動(dòng)入口函數(shù)
		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){//拖動(dòng)初始化
		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(){ //清除拖動(dòng)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){//獲取對(duì)象
		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.把以上代碼引進(jìn)你的頁(yè)面 &lt;script type=&quot;text/javascript&quot; src=&quot;dragClass.js&quot;&gt;&lt;/script&gt;<br/>
		2.在頁(yè)面的"&lt;/body&gt;"標(biāo)簽前加入以下代碼:<br/>
		<div class="example">			
			&lt;script type=&quot;text/javascript&quot;&gt;<br/>
			window.onload = function(){<br />
	var c = new dragClass();//創(chuàng)建對(duì)象<br />
	c.dragStar(&quot;拖動(dòng)id&quot;,&quot;移動(dòng)層id&quot;);<br />
}<br/>
			&lt;/script&gt;
		</div>	
		其中sd方法中的參數(shù)為:<br/>
			參數(shù)一 "拖動(dòng)id":鼠標(biāo)經(jīng)過(guò)時(shí)候鼠標(biāo)樣式變成移動(dòng)樣式模樣的元素的id<br/>
			參數(shù)二 "移動(dòng)層id":即將移動(dòng)的元素的id<br/>	
		<span class="red">3.建議移動(dòng)層是絕對(duì)定位(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>

前一頁(yè):兼容IE和FF的收藏本站、設(shè)為首頁(yè)代碼

后一頁(yè):漂亮的頁(yè)面loading等待頁(yè)面特效(3)

相關(guān)閱讀: 放心會(huì)計(jì); 檢測(cè)非法字符; 鼠標(biāo)經(jīng)過(guò)表格列時(shí)變色; 深山旅行社網(wǎng)站管理系統(tǒng)5.0發(fā)布; 超級(jí)實(shí)用且不花哨的js代碼大全( 7 ); 旅行社網(wǎng)站模板默認(rèn)風(fēng)格1; asp無(wú)限級(jí)調(diào)用分類顯示; 景點(diǎn)門票預(yù)訂

共有0條關(guān)于《拖動(dòng)效果封裝已經(jīng)修改，適應(yīng)火狐》的評(píng)論: 發(fā)表評(píng)論

正在加載評(píng)論......

返回頂部發(fā)表評(píng)論

呢稱:
表情:
內(nèi) 容:	評(píng)論內(nèi)容:不能超過(guò) 1000 字,需審核,請(qǐng)自覺(jué)遵守互聯(lián)網(wǎng)相關(guān)政策法規(guī)。
驗(yàn)證碼:

網(wǎng)友評(píng)論聲明,請(qǐng)自覺(jué)遵守互聯(lián)網(wǎng)相關(guān)政策法規(guī)。

您發(fā)布的評(píng)論即表示同意遵守以下條款:
一、不得利用本站危害國(guó)家安全、泄露國(guó)家秘密,不得侵犯國(guó)家、社會(huì)、集體和公民的合法權(quán)益;
二、不得發(fā)布國(guó)家法律、法規(guī)明令禁止的內(nèi)容;互相尊重,對(duì)自己在本站的言論和行為負(fù)責(zé);
三、本站對(duì)您所發(fā)布內(nèi)容擁有處置權(quán)。

更多信息>>欄目類別選擇: 百度小程序開(kāi)發(fā); 微信小程序開(kāi)發(fā); 微信公眾號(hào)開(kāi)發(fā); uni-app; asp函數(shù)庫(kù); ASP; DIV+CSS; HTML; python

更多>>同類信息: jquery下拉到某個(gè)固定位置然后某些元素發(fā)生改變樣式狀態(tài); canvas繪制的文字如何換行; 兼容pc、移動(dòng)端用js實(shí)現(xiàn)復(fù)制內(nèi)容到剪切板（支持蘋(píng)果safari瀏覽器）; js兼容多個(gè)瀏覽器右下角漂浮廣告; 兼容ie6+和火狐的禁止右鍵; 做在線客服時(shí)，聊天窗口的div滾動(dòng)條始終在底部

更多>>最新添加文章: dw里面查找替換使用正則刪除sqlserver里面的CONSTRAINT; Android移動(dòng)端自動(dòng)化測(cè)試：使用UIAutomatorViewer與Selenium定位元素; 抖音直播音掛載小雪花懂車帝小程序; javascript獲取瀏覽器指紋可以用來(lái)做投票; 火狐Mozilla Firefox出現(xiàn)：無(wú)法載入您的Firefox配置文件它可能已經(jīng)丟失或是無(wú)法訪問(wèn) 問(wèn)題解決集合處理辦法; 在Android、iOS、Windows、MacOS中微信小程序的文件存放路徑; python通過(guò)代碼修改pip下載源讓下載庫(kù)飛起; python里面requests.post返回的res.text還有其它的嗎

更多>>隨機(jī)抽取信息: 深山旅行社網(wǎng)站管理系統(tǒng) v1.7; 用GetString來(lái)提高ASP的速度; 兩個(gè)ASP中防止SQL注入式攻擊; 深山旅行社管理系統(tǒng) v1.8; 利用JAVAscript實(shí)現(xiàn)表格漸變; 移動(dòng)層，并且保存各個(gè)層的位置，可以方便的制作成為一個(gè)動(dòng)態(tài)的頁(yè)面

更多標(biāo)簽熱門標(biāo)簽

彈窗管理系統(tǒng) 臺(tái)歷執(zhí)行 PSD 左右成功容器 DW 首頁(yè) Abandon Request imprt 拖動(dòng) 提示右鍵失效縣獲取兼容時(shí)間 radio 對(duì)聯(lián) Java 凹陷改變 exe 右鍵插件遍歷故事小偷無(wú)限 ResponseXML 規(guī)則控件正則多選逗號(hào) 鼠標(biāo) 變色選擇符展示柱狀圖省市 submit 顯示器 pr 偽類例子三級(jí)

99热热热_国产成人自拍一区_欧美一级网站_99热在线播放_国产精品乱码一区二区三区_久久精品国产一区二区三区

拖動(dòng)效果 封裝 已經(jīng)修改，適應(yīng)火狐

拖動(dòng)效果封裝已經(jīng)修改，適應(yīng)火狐