JS-拖拽效果

拖拽的效果
当鼠标按下时
    并且鼠标移动时

var oDiv = document.querySelector('div');

在div移动之前,先记录原始的定位数据
var oldTop = window.getComputedStyle(oDiv).top;
var oldLeft = window.getComputedStyle(oDiv).left;

当鼠标按下时,鼠标移动,添加事件
window.onmousedown = function(){
    window.onmousemove = function(e){
        // 将鼠标的坐标,作为div定位的数值,定位的是中心的位置
        oDiv.style.left = e.clientX - oDiv.offsetWidth/2  + 'px' ;
        oDiv.style.top = e.clientY - oDiv.offsetHeight/2 + 'px' ;
    }
}

当鼠标抬起时,鼠标移动,赋值null,就没有事件执行了
window.onmouseup = function(){
    window.onmousemove = null;
    // 可以再给div定义,定位位置,可以返回原始位置
    // 也在函数之外,记录存储原始位置
    oDiv.style.left = oldLeft;
    oDiv.style.top = oldTop;
}

如果想要鼠标移动的快点 把 oDiv 改变成 window 或者 document


先 鼠标移动,里面定义鼠标按下,抬起

鼠标移动时,执行鼠标按下,鼠标按下,计算机只会触发一次  
鼠标按下,即时是一直按,只会触发一次
定义的程序,只会回执一次

window.onmousemove = function(){
    window.onmousedown = function(){
        console.log(123);
    }
}


按下的时候,执行鼠标移动
鼠标移动会一直触发,移动中定义的程序,会一直执行

window.onmousedown = function(){
    window.onmousemove = function(){
        console.log(456);
    }
}