用JS指令碼做乙個可拖動的對話方塊

用

js指令碼做乙個可拖動的對話方塊

左直拳一、

可拖動

關鍵是能跟蹤滑鼠座標的變化，從而不斷修正對話方塊的座標。

假設待移動的對話方塊為

objmove

，則有

px = event.x - objmove.style.pixelleft;

py = event.y - objmove.style.pixeltop;

其中pixelleft

、pixeltop是對話方塊左邊緣、頂邊緣與document左邊緣、頂邊緣的距離，event

.x、event

.y是滑鼠按下（未鬆開）的座標值。

因此可得到滑鼠抓緊點與對話方塊邊緣的座標差px，py。只要在滑鼠移動過程中，保持這一座標差恆定不變，月亮走我也走，滑鼠送阿框到村口，即可實現對話方塊的拖動：

objmove.style.left = event.x - px;

objmove.style.top = event.y - py;

這只是原理，還需要一些函式進行支撐。

設定三個函式：

mdown()//

滑鼠按下時觸發，得到px,py的值，放在對話方塊的onmousedown呼叫

mmove()//

滑鼠移動時觸發,拖動，document.onmousemove

mup()//

滑鼠鬆開時觸發，釋放,document.onmouseup,當然放在對話方塊的onmouseup呼叫也是可以的

注意這個對話方塊要用絕對定位。

二、

對話方塊內的文字框等可正常編輯

如果對話方塊內有文字框、下拉框等可供使用者進行編輯的控制項，如果不進行特別處理，則游標在這些控制項內拖動同樣會引起對話方塊的移動，這跟我們平時使用的習慣不符，給框內的編輯帶來麻煩。

怎麼辦呢？

如果知道滑鼠抓緊時落在哪種型別的控制項上就好了。

嘿，這位老闆，你好運了！可以用

event.srcelement

來獲取這個控制項

var hitpoint = event.srcelement;

if( hitpoint.tagname == "input"

|| hitpoint.tagname == "textarea"

|| hitpoint.tagname == "select" )

三、

半透明

這個對話方塊還要有點透明，拖動時下面的元素若隱若現，這樣才讓人夠興奮，浮想聯翩。

主要是css裡實現。

style

="filter:alpha(opacity=90);position:absolute;left:60%;

……不過這好象在ie系的瀏覽器裡才有用，對firefox這些則沒效果。

附錄：drag.js

varobjmove = null;

varpx = 0;

varpy = 0;

document.onmouseup = mup;

document.onmousemove = mmove;

function

mdown(objmoveid)

objmove = document.getelementbyid(objmoveid);

if( objmove == null )

objmove.style.cursor = "move";

//objmove.setcapture();

px = event.x - objmove.style.pixelleft;

py = event.y - objmove.style.pixeltop;

}

function

mmove()

} function

mup()

}  

用JS指令碼做乙個可拖動的對話方塊

用js指令碼做乙個可拖動的對話方塊 左直拳一 可拖動 關鍵是能跟蹤滑鼠座標的變化，從而不斷修正對話方塊的座標。假設待移動的對話方塊為objmove，則有 px event.x objmove.style.pixelleft py event.y objmove.style.pixeltop 其中pi...

用原生js寫乙個簡單的資訊對話方塊

因為要實現兩個對話方塊效果，所以我們這邊設定的是自我對話，無聊的同學可以用這個來打發時間，說不定能找到更多靈感 var obtn document.getelementbyid btn var omsg document.getelementbyid text var ochat document....

彈出乙個對話方塊

showmodaldialog 開啟獨佔方式網頁對話方塊 window.showmodaldialog 開啟乙個獨佔方式網頁對話方塊 話法 syntax variant object.showmodaldialog surl varguments sfeatures 引數 描述 surl 指點url...