JavaScript 设计可拖曳的小方框

■知识点

鼠标拖曳包含以下3个事件。

    mouseup：在释放按下的鼠标键时触发。

    mousedown：在按下鼠标键时触发。

    mousemove：是一个实时响应的事件，当鼠标指针的位置发生变化时（至少移动1个像素），就会触发mousemove事件。该事件响应的灵敏度主要参考鼠标指针移动速度的快慢，以及浏览器跟踪更新的速度。

■实例设计

本例演示如何应用鼠标事件实现鼠标拖曳操作，设计方法如下。

    定义拖放元素为绝对定位。

    获取坐标位置：按下鼠标右键时的指针坐标，移动中当前鼠标的指针坐标，松开鼠标时的指针坐标，拖放元素的原始坐标，拖动中的元素坐标。

    动态跟踪：按下鼠标右键时，获取被拖放元素和鼠标指针的位置，在移动中实时计算鼠标偏移的距离，并利用该偏移距离加上被拖放元素的原坐标位置，获得拖放元素的实时坐标。

■实例代码

<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) {                                          //定义事件对象标准化函数

    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;                //返回标准化的事件对象

}

//定义鼠标事件处理函数

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;                 //注册鼠标移动艰件处理函数

    document.onmouseup = stop;                       //注册松开鼠标事件处理函数

}

function move (event){                                    //鼠标移动处理函数

    event = e(event);

    o.style.left = ox + event .mx - mx + "px";   //定义拖放元素的 x 轴距离

    o.style.top = oy + event.my - my + "pxn;    //定义拖放元素的 y 轴距离

}

function stop(event){                                   //松开鼠标处理函数

    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>