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

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

因?yàn)槲覀冊(cè)谶@篇文章中需要多次獲取鼠標(biāo)坐標(biāo)，所以我們?cè)O(shè)計(jì)了mouseCoords這個(gè)函數(shù)，它只包含了一個(gè)參數(shù)，就是the event.

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

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

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

捕捉鼠標(biāo)點(diǎn)擊

下次我們將知道鼠標(biāo)何時(shí)點(diǎn)擊與何時(shí)放開．如果我們跳過這一步，我們?cè)谧鐾献r(shí)將永遠(yuǎn)不知道鼠標(biāo)移動(dòng)上面時(shí)的動(dòng)作，這將是惱人的與違反直覺的．

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

移動(dòng)一個(gè)元素

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

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

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

最新評(píng)論