分析:
1.鼠標按下,拖拽開始;鼠標移動,拖拽進行;鼠標擡起,拖拽結束(三個事件)
2.被拖動元素與鼠標之間的位置在拖動過程中始終不變,利用這個原理,被拖動元素的位置(?,?)就是鼠標的左(上)點座標-鼠標與被拖動元素頂點之間的相對距離
如圖:
注意:onmousemove應該是在onmousedown發生時進行,不然不需要點擊也能拖動了。被拖動元素能被拖放,它必須是絕對定位。
用戶可能會將方塊拖出窗口外。
window.onload=function(){
var box=document.getElementById("div");
var disX;
var disY;
box.onmousedown=function(ev){ //如果三個事件都用在box上,拖得快一點,鼠標脫離移動層,移動層就拖不動了
var oEvent=ev||event;
disX=oEvent.clientX-box.offsetLeft;
disY=oEvent.clientY-box.offsetTop;
document.onmousemove=function(ev){
var oEvent=ev||event;
var l=oEvent.clientX-disX;
var t=oEvent.clientY-disY;
if(l<0){//左邊超出窗口
l=0;
}else if(l>document.documentElement.clientWidth-box.offsetWidth){
l=document.documentElement.clientWidth-box.offsetWidth;
}
if(t<0){
t=0;
}else if(t>document.documentElement.clientHeight-box.offsetHeight){
t=document.documentElement.clientHeight-box.offsetHeight;
}
box.style.left=l+'px';
box.style.top=t+'px';
};
document.onmouseup=function(){
document.onmousemove=null;
document.onmouseup=null; //鼠標擡起來後,onmouseup事件本身也沒意義了,所以最好清理掉
};
return false; //阻止默認行爲,空的div在低版本ff下,第二次拖動手型會變異常
};
}
- document.documentElement.clientWidth/clientHeight:獲取瀏覽器窗口文檔顯示區域的寬度/高度,不包括滾動條。
- offsetWidth=width+padding+border
- offsetHeight=height+padding+border