JS中拖拽demo

html部分

 <div id="box">
        <div id="drop">此处可以移动拖拽
            <span id="close">[关闭]</span>
        </div>
    </div>

css部分

 #box {
            width: 200px;
            height: 150px;
            border: 1px solid #eee;
            position: absolute; /* 一定要写，拖拽前提得是脱离文档流 */
            background-color: lightgray;
            /* 不让文字被选中 */
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }
        
        #drop {
            width: 100%;
            height: 50px;
            background-color: pink;
            color: #fff;
            cursor: move;
            line-height: 50px;
        }
        
        #close {
            float: right;
            cursor: pointer;
        }

js部分

  // 获取页面滚动出去的距离
        function getScroll() {
            var scrollLeft = document.body.scrollLeft || document.documentElement.scrollLeft;
            var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
            return {
                scrollLeft: scrollLeft,
                scrollTop: scrollTop
            }
        }

        // 获取鼠标在页面的位置，处理浏览器兼容性
        function getPage(e) {
            var pageX = e.pageX || e.clientX + getScroll().scrollLeft;
            var pageY = e.pageY || e.clientY + getScroll().scrollTop;
            return {
                pageX: pageX,
                pageY: pageY
            }
        }
        var box = document.getElementById("box");
        var drop = document.getElementById("drop");
        var close = document.getElementById("close");
        drop.onmousedown = function(e) {
                //兼容处理
                e = e || window.event;
                //当鼠标按下的时候，获取鼠标在盒子中的位置
                //鼠标在盒子中的位置=鼠标在页面上的位置-盒子在页面中的位置
                var x = getPage(e).pageX - box.offsetLeft;
                var y = getPage(e).pageY - box.offsetTop;
                //当鼠标开始移动时候
                document.onmousemove = function(e) {
                    //兼容处理
                    e = e || window.event;
                    //当鼠标移动时候，获取盒子在页面的位置
                    //盒子在页面位置=鼠标在页面的位置-鼠标在盒子的位置
                    var boxX = getPage(e).pageX - x;
                    var boxY = getPage(e).pageY - y;
                    box.style.left = boxX + "px";
                    box.style.top = boxY + "px";
                }

            }
            //当鼠标弹起时候停止拖拽
        document.onmouseup = function() {
            document.onmousemove = null;
        }