JavaScript 設計可拖曳的小方框

■知識點

鼠標拖曳包含以下3個事件。

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

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

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

■實例設計

本例演示如何應用鼠標事件實現(xiàn)鼠標拖曳操作，設計方法如下。

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

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

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

■實例代碼

<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,標準化事件對象

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

function e(event) {                                          //定義事件對象標準化函數(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; //計算鼠標指針的x軸距離

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

    return event;                //返回標準化的事件對象

}

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

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

    event = e(event);                                                 //獲取標準事件對象

    o = event.target;                                                 //獲取當前拖放的元素

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

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

    mx = event.mx;                                                 //按下鼠標指針的x軸坐標

    my = event.my;                                                //按下鼠標指針的y軸坐標

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

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

}

function move (event){                                    //鼠標移動處理函數(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){                                   //松開鼠標處理函數(shù)

    event = e (event);

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

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

    mx = event.mx;                                      //記錄鼠標指針的x軸坐標

    my = event.my;                                      //記錄鼠標指針的y軸坐標

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

}

</script>