JavaScript 設(shè)計可拖曳的小方框

■知識點

鼠標(biāo)拖曳包含以下3個事件。

    mouseup：在釋放按下的鼠標(biāo)鍵時觸發(fā)。

    mousedown：在按下鼠標(biāo)鍵時觸發(fā)。

    mousemove：是一個實時響應(yīng)的事件，當(dāng)鼠標(biāo)指針的位置發(fā)生變化時（至少移動1個像素），就會觸發(fā)mousemove事件。該事件響應(yīng)的靈敏度主要參考鼠標(biāo)指針移動速度的快慢，以及瀏覽器跟蹤更新的速度。

■實例設(shè)計

本例演示如何應(yīng)用鼠標(biāo)事件實現(xiàn)鼠標(biāo)拖曳操作，設(shè)計方法如下。

    定義拖放元素為絕對定位。

    獲取坐標(biāo)位置：按下鼠標(biāo)右鍵時的指針坐標(biāo)，移動中當(dāng)前鼠標(biāo)的指針坐標(biāo)，松開鼠標(biāo)時的指針坐標(biāo)，拖放元素的原始坐標(biāo)，拖動中的元素坐標(biāo)。

    動態(tài)跟蹤：按下鼠標(biāo)右鍵時，獲取被拖放元素和鼠標(biāo)指針的位置，在移動中實時計算鼠標(biāo)偏移的距離，并利用該偏移距離加上被拖放元素的原坐標(biāo)位置，獲得拖放元素的實時坐標(biāo)。

■實例代碼

<div id="box" ></div>

<script>

//初始化拖放對象

var box = document.getElementByld("box");   //獲取頁面中被拖放元素的引用指針

box.style.position = "absolute";                      //絕對定位

box.style.width = "160px";                              //定義寬度

box.style.height = "120px";                             //定義高度

box.style.backgroundColor = "red";               //定義背景色

//初始化變：it,標(biāo)準(zhǔn)化事件對象

var mx, my, ox, oy;                                          //定義備用變量

function e(event) {                                          //定義事件對象標(biāo)準(zhǔn)化函數(shù)

    if ( ! event) {                                                //兼容IE事件模型

        event = window.event; 

        event.target = event.srcElement; 

        event.layerX = event.offsetX; 

        event.layerY = event.offsetY;

    }

    event.mx = event.pageX || event.clientX + document.body.scrollLeft; //計算鼠標(biāo)指針的x軸距離

    event.my = event.pageY || event.clientY + document.body.scrollTop;  //計算鼠標(biāo)指針的y軸距離

    return event;                //返回標(biāo)準(zhǔn)化的事件對象

}

//定義鼠標(biāo)事件處理函數(shù)

document.onmousedown = function(event){         //按下鼠標(biāo)時，初始化處理

    event = e(event);                                                 //獲取標(biāo)準(zhǔn)事件對象

    o = event.target;                                                 //獲取當(dāng)前拖放的元素

    ox = parselnt(o.offsetLeft);                                 //拖放元素的x軸坐標(biāo)

    oy = parselnt(o.offsetTop);                                //拖放元素的y軸坐標(biāo)

    mx = event.mx;                                                 //按下鼠標(biāo)指針的x軸坐標(biāo)

    my = event.my;                                                //按下鼠標(biāo)指針的y軸坐標(biāo)

    document.onmousemove = move;                 //注冊鼠標(biāo)移動艱件處理函數(shù)

    document.onmouseup = stop;                       //注冊松開鼠標(biāo)事件處理函數(shù)

}

function move (event){                                    //鼠標(biāo)移動處理函數(shù)

    event = e(event);

    o.style.left = ox + event .mx - mx + "px";   //定義拖放元素的 x 軸距離

    o.style.top = oy + event.my - my + "pxn;    //定義拖放元素的 y 軸距離

}

function stop(event){                                   //松開鼠標(biāo)處理函數(shù)

    event = e (event);

    ox = parselnt(o.offsetLeft);                     //記錄拖放元素的x軸坐標(biāo)

    oy = parselnt(o.offsetTop);                    //記錄拖放元素的y軸坐標(biāo)

    mx = event.mx;                                      //記錄鼠標(biāo)指針的x軸坐標(biāo)

    my = event.my;                                      //記錄鼠標(biāo)指針的y軸坐標(biāo)

    o = document.onmousemove = document.onmouseup = null;  //釋放所有操作對象

}

</script>