js拖拽功能

html
<div class="mod" id="mod">
    <div class="hd" id="hd"></div>
    <div class="bd ">
        <div class="corner" id="corner"></div>
    </div>
</div>

css

*{
    margin: 0;
    padding: 0;
}
.mod {
    position: absolute;
    left: 30%;
    top: 30%;
    width: 400px;
    height: 400px;
    border: 1px solid red;
    min-width: 100px;
    min-height: 100px;
}
.mod .hd {
    width: 100%;
    height: 30px;
    background: grey;
    cursor: all-scroll;
}
.mod .corner {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 20px;
    height: 20px;
    background: red;
}

js
var mod=document.getElementById(‘mod‘);
var hd=document.getElementById(‘hd‘);
var corner=document.getElementById(‘corner‘);
function addEvent(obj,type,fn){
    obj.addEventListener?obj.addEventListener(type,fn,false):attachEvent(‘on‘+type,fn);
}
function page(){
    var pageWidth,pageHeight;
    if(window.innerWidth){
        pageWidth=window.innerWidth;
        pageHeight=window.innerHeight;
    }else if(document.compatMode===‘CSS1Compat‘) {
        pageWidth=document.documentElement.clientWidth;
        pageHeight=document.documentElement.clientHeight;
    }else{
        pageWidth=document.body.clientWidth;
        pageHeight=document.body.clientHeight;
    }
    return {
        pageWidth:pageWidth,
        pageHeight:pageHeight
    }
}
function move(e){
    var left= e.clientX-offsetLeft,
        top= e.clientY-offsetTop;
    console.log(offsetLeft);
    var pageWidth=page().pageWidth,
        pageHeight=page().pageHeight;
    if(left<0){
        left=0;
    }else if(left>pageWidth-mod.offsetWidth){
        left=pageWidth-mod.offsetWidth
    }
    if(top<0){
        top=0;
    }else if(top>pageHeight-mod.offsetHeight){
        top=pageHeight-mod.offsetHeight;
    }
    mod.style.left=left+‘px‘;
    mod.style.top=top+‘px‘;
}
var offsetLeft,offsetTop;
addEvent(hd,‘mousedown‘, function (e) {
     offsetLeft= e.clientX-mod.offsetLeft;
     offsetTop= e.clientY-mod.offsetTop;
    addEvent(document, ‘mousemove‘, move);
    addEvent(document,‘mouseup‘, function () {
        document.removeEventListener(‘mousemove‘,move,false);

    })
});

var cornerLeft,
    cornerTop;
function cornerMove(e){
    var left= e.clientX-mod.offsetLeft-cornerLeft;
    var top= e.clientY-mod.offsetTop-cornerTop;
    if(left<=80){
        left=80;
    }
    if(top<=80){
        top=80;
    }
    corner.style.left=left+‘px‘;
    corner.style.top=top+‘px‘;
    mod.style.width=left+20+‘px‘;
    mod.style.height=top+20+‘px‘;
}
addEvent(corner,‘mousedown‘, function (e) {
    cornerLeft= e.clientX-corner.offsetLeft-mod.offsetLeft;
    cornerTop= e.clientY-corner.offsetTop-mod.offsetTop;
    addEvent(document,‘mousemove‘,cornerMove);
    addEvent(document,‘mouseup‘, function () {
        document.removeEventListener(‘mousemove‘,cornerMove,false);
    })
});