div鼠标移动效果实现

<script>
    var flag = false
    window.onload = function() {
        $("#box1").mousedown(function(event){
            if(event.button == 0){
                var box1 = document.getElementById("box1");
                flag = !flag;
                document.onmousemove = function(event) {
                    //解决兼容性问题
                    event = event || window.event;
                    /*获取鼠标的定位
                     clientx/clientY是相对可见窗口的坐标
                     pageX/pageY时相对整个页面的坐标
                     但是在ie8中不支持
                     * */
                    /*
                     * 但是我们需要div跟随鼠标移动，则需要知道滚动条的滚动距离
                     * 我们需要获得滚动条的滚动距离
                     * chrome 认为浏览器的滚动条时body.scrollTop来获取
                     * 火狐等浏览器认为浏览器的滚动条是html的
                     *所以需要解决兼容性问题
                     */
                    var st = document.body.scrollTop || document.documentElement.scrollTop;
                    var sl = document.body.scrollLeft || document.documentElement.scrollLeft;

                    var left = event.clientX;
                    //var left = event.pageX;
                    var top = event.clientY;
                    //var top = event.pageY;
                    if(flag){
                        //设置div的偏移量  加上滚动条的滚动距离
                        box1.style.left = left + sl + "px";
                        box1.style.top = top + st + "px";
                    }

                };
            }
        });

    };
</script>
<style>
    #box1 {
        width: 100px;
        height: 100px;
        background-color: red;
        /*开启绝对定位*/
        position: absolute;
    }
</style>
<div id="box1" ; ></div>