你首先要聲明一個evnet對象．不論何時你移動鼠標(biāo)／點擊／按鍵等等，會對應(yīng)一個event的事件．在Internet Explorer里event是全局變量，會被存儲在window.event里． 在firefox中，或者其他瀏覽器，event事件會被相應(yīng)的自定義函數(shù)獲?。?dāng)我們將mouseMove函數(shù)賦值于document.onmousemove，mouseMove會獲取鼠標(biāo)移動事件． 

(ev = ev || window.event) 這樣讓ev在所有瀏覽器下獲取了event事件，在Firefox下"||window.event"將不起作用，因為ev已經(jīng)有了賦值．在MSIE下ev是空的，所以ev將設(shè)置為window.event.

因為我們在這篇文章中需要多次獲取鼠標(biāo)坐標(biāo)，所以我們設(shè)計了mouseCoords這個函數(shù)，它只包含了一個參數(shù)，就是the event.

我們需要運行在MSIE與Firefox為首的其他瀏覽器下．Firefox以event.pageX和event.pageY來代表鼠標(biāo)相應(yīng)于文檔左上角的位置．如果你有一個500*500的窗口，而且你的鼠標(biāo)在正中間，那么paegX和pageY將是250，當(dāng)你將頁面往下滾動500px，那么pageY將是750.此時pageX不變，還是250.

MSIE和這個相反，MSIE將event.clientX與event.clientY來代表鼠標(biāo)與ie窗口的位置，并不是文檔．當(dāng)我們有一個500*500的窗口，鼠標(biāo)在正中間，那么clientX與clientY也是250，如果你垂直滾動窗口到任何位置，clientY仍然是250，因為相對ie窗口并沒有變化．想得到正確的結(jié)果，我們必須加入scrollLeft與scrollTop這兩個相對于文檔鼠標(biāo)位置的屬性．最后，由于MSIE并沒有0,0的文檔起始位置，因為通常會設(shè)置2px的邊框在周圍，邊框的寬度包含在document.body.clientLeft與clientTop這兩個屬性中，我們再加入這些到鼠標(biāo)的位置中．

很幸運，這樣mouseCoords函數(shù)就完成了，我們不再為坐標(biāo)的事操心了．

捕捉鼠標(biāo)點擊

下次我們將知道鼠標(biāo)何時點擊與何時放開．如果我們跳過這一步，我們在做拖拽時將永遠不知道鼠標(biāo)移動上面時的動作，這將是惱人的與違反直覺的．

這里有兩個函數(shù)幫助我們:onmousedown與onmouseup.我們預(yù)先設(shè)置函數(shù)來接收document.onmousemove，這樣看起來很象我們會獲取document.onmousedown與document.onmouseup．但是當(dāng)我們獲取document.onmousedown時，我們同時獲取了任何對象的點擊屬性如:text,images,tables等等.我們只想獲取那些需要拖拽的屬性，所以我們設(shè)置函數(shù)來獲取我們需要移動的對象．

移動一個元素

我們知道了怎么捕捉鼠標(biāo)移動與點擊．剩下的就是移動元素了．首先，要確定一個明確的頁面位置，css樣式表要用'absolute'.設(shè)置元素絕對位置意味著我們可以用樣式表的.top和.left來定位，可以用相對位置來定位了．我們將鼠標(biāo)的移動全部相對頁面top-left，基于這點，我們可以進行下一步了．

當(dāng)我們定義item.style.position='absolute'，所有的操作都是改變left坐標(biāo)與top坐標(biāo)，然后它移動了．

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;
 }
}

最新評論