js鼠标事件|onmousedown+onmousemove+onmouseup实现虚框移动后更新视图

视图展示

down.png

move.png

up.png

html

js

window.onload = function (){
    var oDiv1 = document.getElementById('div1');
    var oDiv2 = document.getElementById('vbox');
    console.log(oDiv1)

    // onmousedown事件
    oDiv1.onmousedown = function (ev){
        drag(this,oDiv2,ev);
        return false
    }
};

// 拖拽函数
// 这个ev是obj的鼠标事件
function drag(objReal,objVir,ev){
    var pos = getPos(ev);
    var disX = pos.x - objReal.offsetLeft;
    var disY = pos.y - objReal.offsetTop;
    objVir.style.display = 'block';

    // 这个ev是document的鼠标事件
    document.onmousemove = function (ev){
        var pos = getPos(ev);   // 获取鼠标位置
        var l = pos.x - disX;   // (l,t)是元素左上角的坐标
        var t = pos.y - disY;

        // 不让元素移出可视区
        if(l<0)
            l = 0;
        else if(l > document.documentElement.clientWidth - objVir.offsetWidth)
            l = document.documentElement.clientWidth - objVir.offsetWidth;
        if(t<0)
            t = 0;
        else if(t > document.documentElement.clientHeight - objVir.offsetHeight)
            t = document.documentElement.clientHeight - objVir.offsetHeight;
        // 移动虚框
        objVir.style.left = l + 'px';
        objVir.style.top = t + 'px';
    }

    // onmouseup事件
    document.onmouseup = function (){
        document.onmousemove = null;   // 停止移动
        document.onmouseup = null;     // 不需要的函数赋值为null
        objVir.style.display = 'none';
        // 移动元素
        objReal.style.left = objVir.style.left;
        objReal.style.top = objVir.style.top;
        // 解锁
        if(objReal.releaseCapture)  
            objReal.releaseCapture();
    };

      // 让所有的事件响应都锁定到obj上
    if(objReal.setCapture)    
        objReal.setCapture();
}

// 获取位置
function getPos(ev){
    // 兼容事件,ev是否被定义，如果为false则使用widown.event
    var oEvent = ev || widown.event;  
    // 如果有滑动条的话，要加上滑了的位置,因为oEvent.clientX是可视区的坐标.
    var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
    var scrollLeft = document.documentElement.scrollLeft||document.body.scrollLeft;
    // 返回一个JSON数组
    return {x:oEvent.clientX + scrollLeft,y:oEvent.clientY + scrollTop};
}

扩展理解：

1. window.οnlοad=function()是什么意思?
   onload是window窗口对象的事件属性，语句是把“匿名函数”赋值给window的onload事件属性,当window加载完成时会触发onload事件，也就触发了“匿名函数”，执行函数体内的语句

2.setCapture()方法？
在处理一个 mousedown 事件过程中调用这个方法来把全部的鼠标事件重新定向到这个元素，直到鼠标按钮被释放或者 document.releaseCapture() 被调用

3.releaseCapture()方法？
如果该 document 中的一个元素之上当前启用了鼠标捕获，则释放鼠标捕获。通过调用 element.setCapture() 实现在一个元素上启用鼠标捕获。

4其它。cmd查询去吧~ （不难)