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

■知識(shí)點(diǎn)

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

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

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

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

■實(shí)例設(shè)計(jì)

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

    定義拖放元素為絕對(duì)定位。

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

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

■實(shí)例代碼

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

<script>

//初始化拖放對(duì)象

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

box.style.position = "absolute";                      //絕對(duì)定位

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

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

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

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

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

function e(event) {                                          //定義事件對(duì)象標(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; //計(jì)算鼠標(biāo)指針的x軸距離

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

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

}

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

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

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

    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;                 //注冊(cè)鼠標(biāo)移動(dòng)艱件處理函數(shù)

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

}

function move (event){                                    //鼠標(biāo)移動(dòng)處理函數(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;  //釋放所有操作對(duì)象

}

</script>