拖拽事件---拖拽事件三剑客

拖拽事件三剑客
mousedown
记录鼠标按下位置和被拖拽物体相对距离
var offsetX = e.clientX - node.offsetLeft;
var offsetY = e.clientY - node.offsetTop;
mousemove
一直保持相对距离
node.style.left = e.clientX - offsetX + “px”;
node.style.top = e.clientY - offsetY + “px”;
mouseup
取消拖拽

//拖拽封装
//1、限制边界拖拽
function limitDrag(node){
    node.onmousedown = function(ev){
    var e = ev || window.event;
    var offsetX = e.clientX - this.offsetLeft;
    var offsetY = e.clientY -this.offsetTop;

    //移动不是在当前物体上移动，而是鼠标拖拽物体在整个页面上移动
    document.onmousemove = function(ev){
        var e = ev || window.event;
        var l = e.clientX - offsetX;
        var t = e.clientY - offsetY;

        //限制出界
        if(l<=0){
            l = 0;
        }
        //输出当前窗口的宽
        var windowWidth = document.documentElement.clientWidth || document.body.clientWidth;
        if(l>=windowWidth-node.offsetWidth){
            l = windowWidth - node.offsetWidth;
        }
        if(t<=0){
            t = 0;
        }
        //输出当前窗口的高
        var windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
        if(t>=windowHeight-node.offsetHeight){
            t = windowHeight-node.offsetHeight;
        }
        node.style.left = l + "px";
        node.style.top = t + "px";
    }
}
document.onmouseup = function(){
    document.onmousemove = null;
}

}

//2、无限制边界出界的拖拽
function drag(nonde){
    nonde.onmousedown = function(ev){
        var e = ev || window.event;
        var offsetX = e.clientX - this.offsetLeft;
        var offsetY = e.clientY -this.offsetTop;

        //移动不是在当前物体上移动，而是鼠标拖拽物体在整个页面上移动
        document.onmousemove = function(ev){
            var e = ev || window.event;
            nonde.style.left = e.clientX - offsetX + "px";
            nonde.style.top = e.clientY - offsetY + "px";
        }
    }
    document.onmouseup = function(){
        document.onmousemove = null;
    }
}