JS拖動層的實作原理

解決思路

這個效果并不算常見，通常用于遊戲或個人站點中。因為拖曳是靠滑鼠來操作的，是以對滑鼠的位置的捕獲是問題的重點，然後才是根據滑鼠的位置設定層的位置。

具體步驟：

1.在對象(層)上按下滑鼠時，先捕獲到需要拖曳的對象，然後擷取或設定該對象的相關屬性。

obj=event.srcElement

obj.setCapture()

z=obj.style.zIndex

obj.style.zIndex=100

x=event.offsetX

y=event.offsetY

down=true

2.開始拖曳時，捕獲滑鼠目前位置，并根據該數值設定被拖曳對象的位置。

obj.style.posLeft=document.body.scrollLeft+event.x-x

obj.style.posTop=document.body.scrollTop+event.y-y

3.拖曳完松開滑鼠後，重設标志 down ，還原對象的 z-index并釋放對它的滑鼠捕捉。

down=false

obj.style.zIndex=z

obj.releaseCapture()

4.完整代碼。

var x,y,z,down=false,obj

function init(){

obj=event.srcElement //事件觸發對象

obj.setCapture() //設定屬于目前對象的滑鼠捕捉

z=obj.style.zIndex //擷取對象的z軸坐标值

//設定對象的z軸坐标值為100，確定目前層顯示在最前面

x=event.offsetX //擷取滑鼠指針位置相對于觸發事件的對象的X坐标

y=event.offsetY //擷取滑鼠指針位置相對于觸發事件的對象的Y坐标

down=true //布爾值，判斷滑鼠是否已按下，true為按下，false為未按下

}

function moveit(){

//判斷滑鼠已被按下且onmouseover和onmousedown事件發生在同一對象上

if(down&&event.srcElement==obj){

with(obj.style){

/*設定對象的X坐标值為文檔在X軸方向上的滾動距離加上目前滑鼠指針相當于文檔對象的X坐标值減滑鼠按下時指針位置相對于觸發事件的對象的X坐标*/

posLeft=document.body.scrollLeft+event.x-x

/*設定對象的Y坐标值為文檔在Y軸方向上的滾動距離加上目前滑鼠指針相當于文檔對象的Y坐标值減滑鼠按下時指針位置相對于觸發事件的對象的Y坐标*/

posTop=document.body.scrollTop+event.y-y

}

function stopdrag(){

//onmouseup事件觸發時說明滑鼠已經松開，是以設定down變量值為false

obj.style.zIndex=z //還原對象的Z軸坐标值

obj.releaseCapture() //釋放目前對象的滑鼠捕捉

</script>

<div onmousedown=init() onmousemove=moveit() onmouseup=stopdrag() style="position:absolute;left:20;top:190;width:100;height:150;border:1px solid #000000;z-index:1;background:#eeeeee">Layer 1</div>

<div onmousedown=init() onmousemove=moveit() onmouseup=stopdrag() style="position:absolute;left:60;top:10;width:100;height:150;border:1px solid #000000;z-index:2;background:#eeeeee">Layer 2</div>

<div onmousedown=init() onmousemove=moveit() onmouseup=stopdrag() style="position:absolute;left:100;top:90;width:100;height:150;border:1px solid #000000;z-index:3;background:#eeeeee">Layer 3</div>

注意：隻有 CSS 的 position 屬性值為 absolute 的對象才能進行拖動操作。

提示：如果需要将拖曳元件化，可以參考第二部分HTC一節。

技巧：可以在 init() 函數中加一句 event.cancelBubble=true ，以取消在該對象上的事件冒泡。

試一試：讀者可以試着實作移動其他對象，例如移動一個圖檔或文本框。

特别提示

在拖曳對象前必須確定該對象的為絕對定位的，把上面的完整代碼儲存就可以看到效果了，在實際就用時務必在對象上加上 onmousedown、onmousemove和onmouseup三個事件并觸發相應函數。代碼運作效果如圖 3.8 所示。

圖 3.8 可拖動的層

本例需要掌握的技巧比較多，捕捉滑鼠，擷取滑鼠位置(相當于對象)，釋放滑鼠捕捉，文檔的滾動距離還有with 語句。

1. setCapture() 設定屬于目前文檔的對象的滑鼠捕捉。

2. event.offsetX 設定或擷取滑鼠指針位置相對于觸發事件的對象的 x 坐标。

3. event.offsetY 設定或擷取滑鼠指針位置相對于觸發事件的對象的 y 坐标。

4. releaseCapture() 釋放目前文檔中對象的滑鼠捕捉。

5. scrollLeft 設定或擷取位于對象左邊界和視窗中目前可見内容的最左端之間的距離。

6. scrollTop 設定或擷取位于對象最頂端和視窗中可見内容的最頂端之間的距離。

7. with 為一個或多個語句設定預設對象。

以下這個方法做出來的比較好看，并增加了層的幾個功能

3個不同高度的三維可拖動圖層的例子

=====================================================================

<html>

<head>

<!--

a:visited{text-decoration:none;color:slategray;}

a:hover{text-decoration:underline;color:slategray;}

a:link{text-decoration:none;color:slategray;}

-->

</style>

//可以打包為js檔案;

var x0=0,y0=0,x1=0,y1=0;

var offx=6,offy=6;

var moveable=false;

var hover='orange',normal='slategray';//color;

var index=10000;//z-index;

//開始拖動;

function startDrag(obj)

{

//鎖定标題欄;

obj.setCapture();

//定義對象;

var win = obj.parentNode;

var sha = win.nextSibling;

//記錄滑鼠和層位置;

x0 = event.clientX;

y0 = event.clientY;

x1 = parseInt(win.style.left);

y1 = parseInt(win.style.top);

//記錄顔色;

normal = obj.style.backgroundColor;

//改變風格;

obj.style.backgroundColor = hover;

win.style.borderColor = hover;

obj.nextSibling.style.color = hover;

sha.style.left = x1 + offx;

sha.style.top = y1 + offy;

moveable = true;

//拖動;

function drag(obj)

if(moveable)

win.style.left = x1 + event.clientX - x0;

win.style.top = y1 + event.clientY - y0;

sha.style.left = parseInt(win.style.left) + offx;

sha.style.top = parseInt(win.style.top) + offy;

//停止拖動;

function stopDrag(obj)

win.style.borderColor = normal;

obj.style.backgroundColor = normal;

obj.nextSibling.style.color = normal;

sha.style.left = obj.parentNode.style.left;

sha.style.top = obj.parentNode.style.top;

//放開标題欄;

obj.releaseCapture();

moveable = false;

//獲得焦點;

function getFocus(obj)

index = index + 2;

var idx = index;

obj.style.zIndex=idx;

obj.nextSibling.style.zIndex=idx-1;

function min(obj)

var win = obj.parentNode.parentNode;

var tit = obj.parentNode;

var msg = tit.nextSibling;

var flg = msg.style.display=="none";

if(flg)

win.style.height = parseInt(msg.style.height) + parseInt(tit.style.height) + 2*2;

sha.style.height = win.style.height;

msg.style.display = "block";

obj.innerHTML = "0";

else

win.style.height = parseInt(tit.style.height) + 2*2;

obj.innerHTML = "2";

msg.style.display = "none";

function cls(obj)

win.style.visibility = "hidden";

sha.style.visibility = "hidden";

//建立一個對象;

function xWin(id,w,h,l,t,tit,msg)

index = index+2;

this.id = id;

this.width = w;

this.height = h;

this.left = l;

this.top = t;

this.zIndex = index;

this.title = tit;

this.message = msg;

this.obj = null;

this.bulid = bulid;

this.bulid();

//初始化;

function bulid()

var str = ""

+ "<div id=xMsg" + this.id + " "

+ "style='"

+ "z-index:" + this.zIndex + ";"

+ "width:" + this.width + ";"

+ "height:" + this.height + ";"

+ "left:" + this.left + ";"

+ "top:" + this.top + ";"

+ "background-color:" + normal + ";"

+ "color:" + normal + ";"

+ "font-size:10px;"

+ "font-family:Verdana;"

+ "position:absolute;"

+ "cursor:default;"

+ "border:2px solid " + normal + ";"

+ "' "

+ "onmousedown='getFocus(this)'>"

+ "<div "

+ "style='"

+ "background-color:" + normal + ";"

+ "width:" + (this.width-2*2) + ";"

+ "height:20;"

+ "color:white;"

+ "' "

+ "onmousedown='startDrag(this)' "

+ "onmouseup='stopDrag(this)' "

+ "onmousemove='drag(this)' "

+ ">"

+ "<span style='width:" + (this.width-2*12-4) + ";padding-left:3px;'>" + this.title + "</span>"

+ "<span style='width:12;border-width:0px;color:white;font-family:webdings;' onclick='min(this)'>0</span>"

+ "<span style='width:12;border-width:0px;color:white;font-family:webdings;' onclick='cls(this)'>r</span>"

+ "</div>"

+ "<div style='"

+ "width:100%;"

+ "height:" + (this.height-20-4) + ";"

+ "background-color:white;"

+ "line-height:14px;"

+ "word-break:break-all;"

+ "padding:3px;"

+ "'>" + this.message + "</div>"

+ "</div>"

+ "<div style='"

+ "z-index:" + (this.zIndex-1) + ";"

+ "background-color:black;"

+ "filter:alpha(opacity=40);"

+ "'>?</div>";

//alert(str);

document.body.insertAdjacentHTML("beforeEnd",str);

//-->

function initialize()

var a = new xWin("1",160,200,200,200,"Message","xWin <br> A Cool Pop Div Window<br>Version:1.0<br>2002-8-13");

var b = new xWin("2",240,200,100,100,"Wildwind's Msgbox","Welcome to visited my personal website:<br><a href=http://www14.brinkster.com/wildcity target=_blank>http://wildcity.126.com</a><br>and u can also sign my guestbook at:<br><a href=http://www14.brinkster.com/wildcity/gbook target=_blank>http://wildcity.126.com/gbook</a><br><br>thx!!! =)...");

var c = new xWin("3",200,160,250,50,"Copyright","Copyright by <a href='mailto:[email protected]'>Wildwind</a>!");

window.onload = initialize;

</head>

</body>

</html>

JS拖動層的實作原理

繼續閱讀

主流浏覽器四大綜合性能測試

JavaScript自學筆記【4】函數的聲明與調用目錄二、函數的聲明三、函數的調用

請求逾時VUE axios重新再次請求

nodejs微信開發---授權登入+擷取使用者資訊微信網頁授權

debian9更新4.9.0核心到4.19.2核心過程

Javascript建構Bingo卡片遊戲

JavaScript的那些坑之事件代理事件代理事件階段

javascript的for (var i in data)慎用javascript中的for (var i in data)謹慎用

tab滑鼠經過菜單切換

vue （vue2.0）使用總結(從大體結構總結)

vue搭建過程及出現問題

/\B(?=(?:\d{3})+$)/g 一條令人費解的正規表達式

适用于JavaScript的ECMAScript 2020規範向前發展

JS生成uuid的四種方法

layui多任務上傳添加進度條