js拖拽功能

<div style="width: 100px; height:100px; background-color:red; position: absolute; left:0; top:0;"></div>

<script>
    var div = document.getElementsByTagName('div')[0];
    var disX,  //鼠标点击时，相对方块左边的距离
        disY;  //鼠标点击时，相对方块上边的距离


    div.onmousedown = function () {
        disX = event.pageX - parseInt(div.style.left);
        disY = event.pageY - parseInt(div.style.top);
        document.onmousemove = function (e) {
            var event = e || window.event;
            console.log(event.pageX + "" + event.pageY);  //输出鼠标当前位置
            div.style.left = event.pageX - disX + "px";
            div.style.top = event.pageY - disY + "px";
        }
        document.onmouseup = function () {
            document.onmousemove = null;    //鼠标抬起给拖拽清除
        }
    }



</script>

完美版：封装函数drag;
未完待续