• <u id="4dkwc"><bdo id="4dkwc"></bdo></u>

          <video id="4dkwc"><ins id="4dkwc"></ins></video>
           
          

          

	



    
    






    
    
    








          








          
	
          200
          
	
          
		
          js拖拽建站程序例子
          
		
          時(shí)間: 2013-05-27 14:09:52   點(diǎn)擊數(shù): 75355   來源: 耐思智慧 
          
		
		
          
            
          
	js拖拽建站程序例子 

          

          
	
		
          
			
				
          
					　　關(guān)于js拖拽早已是老生常談，網(wǎng)上一搜一大坨，但是有很多并不是很完善，或者兼容性不夠，或者功能不全，并且這樣的東西還是自己寫的好用。我打算在（一）中主要對js拖拽功能的注意點(diǎn)進(jìn)行羅列，力求簡單；在（二）中利用（一）的拖拽去實(shí)現(xiàn)類似google個(gè)性化首頁的拖拽模塊功能。
				
          
				
          
					　　首先貼上完整code（IE/FF/Chrome）
				
          
			          		
		
          
	          

          

          
	
		
          
			
				<!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>
          
<title></title>
          
<script type="text/javascript"> 
          
var Common = {
          
getEvent: function() {//ie/ff
          
if (document.all) {
          
return window.event;
          
}
          
func = getEvent.caller;
          
while (func != null) {
          
var arg0 = func.arguments[0];
          
if (arg0) {
          
if ((arg0.constructor == Event || arg0.constructor == MouseEvent) || (typeof (arg0) == "object" && arg0.preventDefault && arg0.stopPropagation)) {
          
return arg0;
          
}
          
}
          
func = func.caller;
          
}
          
return null;
          
},
          
getMousePos: function(ev) {
          
if (!ev) {
          
ev = this.getEvent();
          
}
          
if (ev.pageX || ev.pageY) {
          
return {
          
x: ev.pageX,
          
y: ev.pageY
          
};
          
}
          

          
if (document.documentElement && document.documentElement.scrollTop) {
          
return {
          
x: ev.clientX + document.documentElement.scrollLeft - document.documentElement.clientLeft,
          
y: ev.clientY + document.documentElement.scrollTop - document.documentElement.clientTop
          
};
          
}
          
else if (document.body) {
          
return {
          
x: ev.clientX + document.body.scrollLeft - document.body.clientLeft,
          
y: ev.clientY + document.body.scrollTop - document.body.clientTop
          
};
          
}
          
}, 
          
getItself: function(id) {
          
return "string" == typeof id ? document.getElementById(id) : id;
          
},
          
getViewportSize: { w: (window.innerWidth) ? window.innerWidth : (document.documentElement && document.documentElement.clientWidth) ? document.documentElement.clientWidth : document.body.offsetWidth, h: (window.innerHeight) ? window.innerHeight : (document.documentElement && document.documentElement.clientHeight) ? document.documentElement.clientHeight : document.body.offsetHeight },
          
isIE: document.all ? true : false,
          
setOuterHtml: function(obj, html) {
          
var Objrange = document.createRange();
          
obj.innerHTML = html;
          
Objrange.selectNodeContents(obj);
          
var frag = Objrange.extractContents();
          
obj.parentNode.insertBefore(frag, obj);
          
obj.parentNode.removeChild(obj);
          
}
          
}
          

          
///------------------------------------------------------------------------------------------------------
          
var Class = {
          
create: function() {
          
return function() { this.init.apply(this, arguments); }
          
}
          
}
          
var Drag = Class.create();
          
Drag.prototype = {
          
init: function(titleBar, dragDiv, Options) {
          
//設(shè)置點(diǎn)擊是否透明，默認(rèn)不透明
          
titleBar = Common.getItself(titleBar);
          
dragDiv = Common.getItself(dragDiv);
          
this.dragArea = { maxLeft: 0, maxRight: Common.getViewportSize.w - dragDiv.offsetWidth - 2, maxTop: 0, maxBottom: Common.getViewportSize.h - dragDiv.offsetHeight - 2 };
          
if (Options) {
          
this.opacity = Options.opacity ? (isNaN(parseInt(Options.opacity)) ? 100 : parseInt(Options.opacity)) : 100; 
          
this.keepOrigin = Options.keepOrigin ? ((Options.keepOrigin == true || Options.keepOrigin == false) ? Options.keepOrigin : false) : false;
          
if (this.keepOrigin) { this.opacity = 50; }
          
if (Options.area) {
          
if (Options.area.left && !isNaN(parseInt(Options.area.left))) { this.dragArea.maxLeft = Options.area.left };
          
if (Options.area.right && !isNaN(parseInt(Options.area.right))) { this.dragArea.maxRight = Options.area.right };
          
if (Options.area.top && !isNaN(parseInt(Options.area.top))) { this.dragArea.maxTop = Options.area.top };
          
if (Options.area.bottom && !isNaN(parseInt(Options.area.bottom))) { this.dragArea.maxBottom = Options.area.bottom };
          
}
          
}
          
else {
          
this.opacity = 100, this.keepOrigin = false;
          
}
          
this.originDragDiv = null;
          
this.tmpX = 0;
          
this.tmpY = 0;
          
this.moveable = false;
          

          
var dragObj = this;
          

          
titleBar.onmousedown = function(e) {
          
var ev = e || window.event || Common.getEvent();
          
//只允許通過鼠標(biāo)左鍵進(jìn)行拖拽,IE鼠標(biāo)左鍵為1 FireFox為0
          
if (Common.isIE && ev.button == 1 || !Common.isIE && ev.button == 0) {
          
}
          
else {
          
return false;
          
}
          

          
if (dragObj.keepOrigin) {
          
dragObj.originDragDiv = document.createElement("div");
          
dragObj.originDragDiv.style.cssText = dragDiv.style.cssText;
          
dragObj.originDragDiv.style.width = dragDiv.offsetWidth;
          
dragObj.originDragDiv.style.height = dragDiv.offsetHeight;
          
dragObj.originDragDiv.innerHTML = dragDiv.innerHTML;
          
dragDiv.parentNode.appendChild(dragObj.originDragDiv);
          
}
          

          
dragObj.moveable = true;
          
dragDiv.style.zIndex = dragObj.GetZindex() + 1;
          
var downPos = Common.getMousePos(ev);
          
dragObj.tmpX = downPos.x - dragDiv.offsetLeft;
          
dragObj.tmpY = downPos.y - dragDiv.offsetTop;
          

          
titleBar.style.cursor = "move";
          
if (Common.isIE) {
          
dragDiv.setCapture();
          
} else {
          
window.captureEvents(Event.MOUSEMOVE);
          
}
          

          
dragObj.SetOpacity(dragDiv, dragObj.opacity);
          

          
//FireFox 去除容器內(nèi)拖拽圖片問題
          
if (ev.preventDefault) {
          
ev.preventDefault();
          
ev.stopPropagation();
          
}
          

          
document.onmousemove = function(e) {
          
if (dragObj.moveable) {
          
var ev = e || window.event || Common.getEvent();
          
//IE 去除容器內(nèi)拖拽圖片問題
          
if (document.all) //IE
          
{
          
ev.returnValue = false;
          
}
          

          
var movePos = Common.getMousePos(ev);
          
dragDiv.style.left = Math.max(Math.min(movePos.x - dragObj.tmpX, dragObj.dragArea.maxRight), dragObj.dragArea.maxLeft) + "px";
          
dragDiv.style.top = Math.max(Math.min(movePos.y - dragObj.tmpY, dragObj.dragArea.maxBottom), dragObj.dragArea.maxTop) + "px";
          

          
}
          
};
          

          
document.onmouseup = function() {
          
if (dragObj.keepOrigin) {
          
if (Common.isIE) {
          
dragObj.originDragDiv.outerHTML = "";
          
}
          
else {
          
Common.setOuterHtml(dragObj.originDragDiv, "");
          
}
          
}
          
if (dragObj.moveable) {
          
if (Common.isIE) {
          
dragDiv.releaseCapture();
          
}
          
else {
          
window.releaseEvents(Event.MOUSEMOVE);
          
}
          
dragObj.SetOpacity(dragDiv, 100);
          
titleBar.style.cursor = "default";
          
dragObj.moveable = false;
          
dragObj.tmpX = 0;
          
dragObj.tmpY = 0;
          
}
          
};
          
}
          
},
          
SetOpacity: function(dragDiv, n) {
          
if (Common.isIE) {
          
dragDiv.filters.alpha.opacity = n;
          
}
          
else {
          
dragDiv.style.opacity = n / 100;
          
}
          

          
},
          
GetZindex: function() {
          
var maxZindex = 0;
          
var divs = document.getElementsByTagName("div");
          
for (z = 0; z < divs.length; z++) {
          
maxZindex = Math.max(maxZindex, divs[z].style.zIndex);
          
}
          
return maxZindex;
          
}
          
}
          

          
window.onload = function() {
          
new Drag("dragDiv", "dragDiv", { opacity: 100, keepOrigin: true }); //, area: { left: 50, right: 500, top: 100, bottom: 400}
          
}
          
　　
          

          
</script>
          

          
</head>
          
<body>
          
<div id="dragDiv" style="position:absolute; background-color:#FFFFFF;border:solid 1px #849BCA;width:200px;left:10px;top:10px;filter:alpha(opacity=100);opacity:1;">
          
<table cellpadding="0" cellspacing="0" border="0" style="width:100%;border-collapse:collapse; ">
          
<tr id="titleBar" style="height:22px; text-align:left; background-color:#547BC9;color:White; padding:3px;">
          
<th align="left" unselectable="on" >Title</th>
          
</tr>
          
<tr style="height:130px;padding:3px;" align="left" valign="top" unselectable="on">
          
<td><img src="http://www.iisp.com/images/v4/logo.gif" alt="pic for drag" /> Content...</td> <!---->
          
</tr>
          
</table>
          
</div> 
          
<div style="position:absolute; font-family:Tahoma;border:solid 1px #849BCA; background-color:#AAAAAA;width:200px;height:100px;left:210px;top:210px;filter:alpha(opacity=100);opacity:1; z-index:999">Are you able to cover me?</div> 
          
</body>
          
</html>
			          		
		
          
	          

          

          
	
		
          
			
				
          
					對Drag的使用：在window.onload中，必填參數(shù)是titleBar和dragDiv，后者是要拖拽的容器，前者是拖拽容器的可拖拽部位，譬如經(jīng)常遇到的通過標(biāo)題欄拖動(dòng)整個(gè)DIV，則titleBar即為改標(biāo)題欄。而{ opacity: 100, keepOrigin: true , area: { left: 50, right: 500, top: 100, bottom: 400}} 是可選參數(shù)，用于擴(kuò)展功能，opacity設(shè)置透明度，keepOrigin設(shè)置拖拽過程中是否保留原來拖拽容器，area設(shè)置拖拽范圍。
				
          
				
            
					
          1. 
						拖拽的基本原理：當(dāng)mousedown時(shí)記下鼠標(biāo)點(diǎn)擊位置離拖拽容器左邊沿的距離和上邊沿的距離，即tmpX,tmpY；mousemove時(shí)通過定位拖拽容器的style.left/style.top，使拖拽容器進(jìn)行移動(dòng)，定位到哪里則由剛剛的tmpX/tmpY和當(dāng)前鼠標(biāo)所在位置計(jì)算得出；mouseup時(shí)，結(jié)束移動(dòng)。
					
            2. 
					
          2. 
						“var dragObj = this;” 這句是為了在mousedown/mouseup/mousemove事件里對Drag對象的相關(guān)變量進(jìn)行引用。因?yàn)樵趍ousedown/mouseup/mousemove里的this是window.
					
            3. 
					
          3. 
						當(dāng)拖拽速度太快導(dǎo)致鼠標(biāo)移出拖拽容器，而拖拽容器位置未變，用document.mousemove代替titleBar.mousemove即可。
					
            4. 
					
          4. 
						設(shè)置拖拽容器可拖拽的范圍，若未設(shè)置，則默認(rèn)為當(dāng)前窗口可視范圍。Note：在設(shè)置范圍的時(shí)候使用Math.max/min來處理，而不是用If語句判斷，用后者的話會(huì)導(dǎo)致快速拖拽時(shí)未達(dá)到容許范圍邊沿即停止的狀況。
					
            5. 
					
          5. 
						當(dāng)拖拽過程中，可設(shè)置是否保留原來拖拽容器，當(dāng)拖拽結(jié)束，隱藏原來容器，默認(rèn)不保留。
					
            6. 
					
          6. 
						當(dāng)拖拽時(shí)，可設(shè)置拖拽的容器是否透明及透明度多少，默認(rèn)不透明。但若拖拽過程中設(shè)置保留原來拖拽容器，即keepOrigin: true，則設(shè)置透明度為50%。
					
            7. 
					
          7. 
						使右鍵、鼠標(biāo)中鍵等不能拖動(dòng)，僅左鍵單擊可以拖動(dòng)。Note：IE鼠標(biāo)左鍵為event.Button=1 FireFox為event.Button=0.
					
            8. 
					
          8. 
						解決如果點(diǎn)擊在圖片上無法拖拽的問題：非常杯具的是IE通過ev.cancelBubble=true;ev.returnValue = false;來防止圖片的事件，注意是放在document.onmousemove中，而FireFox通過ev.preventDefault();ev.stopPropagation(); 但是是放在titleBar的mousedown事件中。
					
            9. 
					
          9. 
						有一種情況，當(dāng)瀏覽器窗口不是最大化的時(shí)候，你希望當(dāng)鼠標(biāo)在瀏覽器外移動(dòng)時(shí)，瀏覽器里的拖拽容器仍然移動(dòng)，這時(shí)就要使用鼠標(biāo)事件捕獲，IE中相應(yīng)的是dragDiv.setCapture();與dragDiv.releaseCapture(); FF中是window.captureEvents(Event.MOUSEMOVE);與window.releaseEvents(Event.MOUSEMOVE) 。
					
            10. 
					
          10. 
						確保每次拖拽時(shí)拖拽容器的zindex都不會(huì)被其他塊元素覆蓋。
					
            11. 
				
          
			          		
		
          
	          

          		
          
        		
			
          
				
			
          
		          
        		
          
			上一篇：做論壇好還是做網(wǎng)站好			下一篇：網(wǎng)站建設(shè)中網(wǎng)站系統(tǒng)開發(fā)建設(shè)與管理的技術(shù)和方法		
          
	
          

	
          

		            
											
          

          


	        

          
	
	
          
		
	
          
	
          
		
          
			
			
          旗下網(wǎng)站：耐思智慧 - 淘域網(wǎng) - 我的400電話 - 中文域名：耐思尼克.cn 耐思尼克.top
          
			
          耐思智慧 © 版權(quán)所有 Copyright © 2000-2024 IISP.COM,Inc. All rights reserved
          
			
			
          
                備案號碼：
                粵ICP備09063828號　
                公安備案號：
                公安備案
                
                    粵公網(wǎng)安備 44049002000123號　
                
                域名注冊服務(wù)機(jī)構(gòu)許可：粵D3.1-20240003
                CN域名代理自深圳萬維網(wǎng)
            
          
			
          聲明：本網(wǎng)站中所使用到的其他各種版權(quán)內(nèi)容，包括但不限于文章、圖片、視頻、音頻、字體等內(nèi)容版權(quán)歸原作者所有，如權(quán)利所有人發(fā)現(xiàn)，請及時(shí)告知，以便我們刪除版權(quán)內(nèi)容
          
			
          本站程序界面、源代碼受相關(guān)法律保護(hù), 未經(jīng)授權(quán), 嚴(yán)禁使用; 耐思智慧 © 為我公司注冊商標(biāo), 未經(jīng)授權(quán), 嚴(yán)禁使用
          
			
          法律顧問：珠海知名律師 廣東篤行律師事務(wù)所 夏天風(fēng) 律師
          
		
          
	
          
		
          
		
        	
          


	
          
   


          
	
	
          
     

          
    
          
 




                                
                            
    






日韩精品一区二区三区毛片_亚洲中文字幕在线19页_久久超碰熟女中文字幕_四季AV在线二区中文字幕

              3. <u id="4dkwc"><bdo id="4dkwc"></bdo></u>
              

                <video id="4dkwc"><ins id="4dkwc"></ins></video>