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;
        }