拖动窗口并移动窗口位置

该功能常见于滑动验证码

HTML部分

<div id="box">
    <div id="title">按住拖动</div>
</div>

css部分

<style>
    * {
        padding: 0;
        margin: 0;
    }
    #box {
        width: 400px;
        height: 300px;
        background-color: orange;
        position: absolute;
        text-align: center;
        color: #ffffff;
    }
    #title {
        width: 100%;
        height: 2em;
        line-height: 2em;
        background-color: #999999;
        cursor: move;
    }
</style>

JS部分

<script type="text/javascript">        
        var box = document.getElementsByClassName('box')[0];        
        var title = document.getElementsByClassName('title')[0];        
        //0.声明一个开关变量        
        var off = 0;        
        //0.1声明一个变量一保存鼠标与盒子之间的距离        
        var cur = {};        
        //1.给标题添加鼠标按下事件        
        title.onmousedown = function(e){                            
            off = 1;
            //1.1 计算鼠标位置-盒子到页面的位置，得到一个差，永远不变
            cur.x = e.clientX-box.offsetLeft;
            cur.y = e.clientY-box.offsetTop;            
        }        
        //2.添加鼠标移动事件        
        document.onmousemove = function(e){            
            //2.1判断按下的开关状态  如果是真再运行            
            if(!off) return;
            var left = e.clientX - cur.x;            
            var tops = e.clientY - cur.y;
            //限制box不超出浏览器
            left = left<0?0:left;
            tops = tops<0?0:tops;
            left = left >= window.innerWidth-400 ? window.innerWidth-400 : left;
            tops = tops >= window.innerHeight-300 ? window.innerHeight-300 : tops;
            
            box.style.left = left+'px';
            box.style.top = tops+'px';            
        }        
        //3.添加鼠标抬起事件
        title.onmouseup = title.onmouseout= function(){            
            console.log('鼠标抬起');            
            off = 0;            
        }            
    </script>