|
你首先要聲明一個evnet對象．不論何時你移動鼠標／點擊／按鍵等等，會對應一個event的事件．在Internet Explorer里event是全局變量，會被存儲在window.event里． 在firefox中，或者其他瀏覽器，event事件會被相應的自定義函數獲�。斘覀儗�mouseMove函數賦值于document.onmousemove，mouseMove會獲取鼠標移動事件．
(ev = ev || window.event) 這樣讓ev在所有瀏覽器下獲取了event事件，在Firefox下"||window.event"將不起作用，因為ev已經有了賦值．在MSIE下ev是空的，所以ev將設置為window.event.
因為我們在這篇文章中需要多次獲取鼠標坐標，所以我們設計了mouseCoords這個函數，它只包含了一個參數，就是the event.
我們需要運行在MSIE與Firefox為首的其他瀏覽器下．Firefox以event.pageX和event.pageY來代表鼠標相應于文檔左上角的位置．如果你有一個500*500的窗口，而且你的鼠標在正中間，那么paegX和pageY將是250，當你將頁面往下滾動500px，那么pageY將是750.此時pageX不變，還是250.
MSIE和這個相反，MSIE將event.clientX與event.clientY來代表鼠標與ie窗口的位置，并不是文檔．當我們有一個500*500的窗口，鼠標在正中間，那么clientX與clientY也是250，如果你垂直滾動窗口到任何位置，clientY仍然是250，因為相對ie窗口并沒有變化．想得到正確的結果，我們必須加入scrollLeft與scrollTop這兩個相對于文檔鼠標位置的屬性．最后，由于MSIE并沒有0,0的文檔起始位置，因為通常會設置2px的邊框在周圍，邊框的寬度包含在document.body.clientLeft與clientTop這兩個屬性中，我們再加入這些到鼠標的位置中．
很幸運，這樣mouseCoords函數就完成了，我們不再為坐標的事操心了．
捕捉鼠標點擊
下次我們將知道鼠標何時點擊與何時放開．如果我們跳過這一步，我們在做拖拽時將永遠不知道鼠標移動上面時的動作，這將是惱人的與違反直覺的．
這里有兩個函數幫助我們:onmousedown與onmouseup.我們預先設置函數來接收document.onmousemove，這樣看起來很象我們會獲取document.onmousedown與document.onmouseup．但是當我們獲取document.onmousedown時，我們同時獲取了任何對象的點擊屬性如:text,images,tables等等.我們只想獲取那些需要拖拽的屬性，所以我們設置函數來獲取我們需要移動的對象．
運行代碼框
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運行]
移動一個元素
我們知道了怎么捕捉鼠標移動與點擊．剩下的就是移動元素了．首先，要確定一個明確的頁面位置，css樣式表要用'absolute'.設置元素絕對位置意味著我們可以用樣式表的.top和.left來定位，可以用相對位置來定位了．我們將鼠標的移動全部相對頁面top-left，基于這點，我們可以進行下一步了．
當我們定義item.style.position='absolute'，所有的操作都是改變left坐標與top坐標，然后它移動了．
document.onmousemove = mouseMove;
document.onmouseup = mouseUp;
var dragObject = null;
var mouseOffset = null;
function getMouseOffset(target, ev){
ev = ev || window.event;
var docPos = getPosition(target);
var mousePos = mouseCoords(ev);
return {x:mousePos.x - docPos.x, y:mousePos.y - docPos.y};
}
function getPosition(e){
var left = 0;
var top = 0;
while (e.offsetParent){
left += e.offsetLeft;
top += e.offsetTop;
e = e.offsetParent;
}
left += e.offsetLeft;
top += e.offsetTop;
return {x:left, y:top};
}
function mouseMove(ev){
ev = ev || window.event;
var mousePos = mouseCoords(ev);
if(dragObject){
dragObject.style.position = 'absolute';
dragObject.style.top = mousePos.y - mouseOffset.y;
dragObject.style.left = mousePos.x - mouseOffset.x;
return false;
}
}
function mouseUp(){
dragObject = null;
}
function makeDraggable(item){
if(!item) return;
item.onmousedown = function(ev){
dragObject = this;
mouseOffset = getMouseOffset(this, ev);
return false;
}
}
出處：sohotx.com
責任編輯：moby
上一頁 怎么用javascript進行拖拽 [1] 下一頁 怎么用javascript進行拖拽 [3]
◎進入論壇網頁制作、網站綜合版塊參加討論
|
第 1 頁 
第 2 頁 怎么用javascript進行拖拽 [2]
