• 鼠標跟隨（鼠標?在元素的中心，緩動動畫慢慢移動）
  開始位置 var leaderX = pic.offsetLeft;//水平方向的當前位置
  目標位置 var targetX = pageX - pic.offsetWidth / 2

<script>
    var timer = null;
    //找人
    var pic = document.getElementById("pic");
    //在頁面上 點擊的時候 獲取鼠標在頁面上的位置 讓圖片 漸漸到 到這個位置
    document.onmousemove = function (event) {
        clearInterval(timer);
        var event = event || window.event;
        //獲取鼠標在頁面上的位置
        var pageX = event.pageX || event.clientX + document.documentElement.scrollLeft;
        var pageY = event.pageY || event.clientY + document.documentElement.scrollTop;
        //讓圖片 漸漸到 到這個位置
        timer = setInterval(function () {
            //step = (target - leader) / 10
            //leader = leader + step
//水平方向的目標，如果不減就是左上角，減了相當于targetX小了
            var targetX = pageX - pic.offsetWidth / 2
            var targetY = pageY - pic.offsetHeight / 2;//
            var leaderX = pic.offsetLeft;//水平方向的當前位置
            var leaderY = pic.offsetTop;//
            var stepX = (targetX - leaderX) / 10;
            var stepY = (targetY - leaderY) / 10;
            stepX = stepX > 0 ? Math.ceil(stepX) : Math.floor(stepX);
            stepY = stepY > 0 ? Math.ceil(stepY) : Math.floor(stepY);
            leaderX = leaderX + stepX;
            leaderY = leaderY + stepY;
            pic.style.left = leaderX + "px";//一定要記得加單位
            pic.style.top = leaderY + "px";//一定要記得加單位
            if (leaderX === targetX && leaderY === targetY) {
                clearInterval(timer);
            }
        }, 1);
    };
</script>

• 拖拽（盒子的位置設(shè)置為，鼠標位置-鼠標在盒子里面位置）
  d_box.style.left = pageX - boxX + "px";
  d_box.style.top = pageY - boxY + "px";

<script>
    //找人
    var d_box = document.getElementById("d_box");//盒子整體
    var drop = document.getElementById("drop");//拖動條
    //鼠標在盒子的頭部按下 盒子整體跟著鼠標移動
    //onmousedown 鼠標按下事件
    drop.onmousedown = function (event) {
        //鼠標按下之后 獲取此刻 鼠標在d_box中的位置
        var event = event || window.event;
        //鼠標在頁面中的位置
        var pageX = event.pageX || event.clientX + document.documentElement.scrollLeft;
        var pageY = event.pageY || event.clientY + document.documentElement.scrollTop;
        //鼠標在盒子中的位置
        //注意 因為要對d_box進行移動 所以加了定位 所以就不能算 drop的offsetLeft
        var boxX = pageX - d_box.offsetLeft;//鼠標在盒子中的水平位置
        var boxY = pageY - d_box.offsetTop;//鼠標在盒子中的豎直位置
        //按下后變?yōu)榭赏蟿訝顟B(tài) 鼠標移動后 讓盒子跟著鼠標移動
        document.onmousemove = function (event) {
            //讓盒子跟著鼠標走
            var event = event || window.event;
            //獲取鼠標在頁面上的位置
            var pageX = event.pageX || event.clientX + document.documentElement.scrollLeft;
            var pageY = event.pageY || event.clientY + document.documentElement.scrollTop;
            //根據(jù)鼠標位置設(shè)置盒子位置
            d_box.style.left = pageX - boxX + "px";
            d_box.style.top = pageY - boxY + "px";
            window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
        };
    }
    document.onmouseup = function () {
        document.onmousemove = null;
    };
</script>

 $(".hd").mousedown(function (event) {
        //鼠標按下之后 獲取此刻 鼠標在d_box中的位置
        var event = event || window.event;
        //鼠標在頁面中的位置
        var pageX = event.pageX || event.clientX + document.documentElement.scrollLeft;
        var pageY = event.pageY || event.clientY + document.documentElement.scrollTop;
        //鼠標在盒子中的位置
        //注意 因為要對d_box進行移動 所以加了定位 所以就不能算 drop的offsetLeft
        var offset = $(".d-box").offset();
        var boxX = pageX - offset.left;//鼠標在盒子中的水平位置
        var boxY = pageY - offset.top;//鼠標在盒子中的豎直位置
        // //按下后變?yōu)榭赏蟿訝顟B(tài) 鼠標移動后 讓盒子跟著鼠標移動
        $(document).mousemove(function (event) {
            //讓盒子跟著鼠標走
            var event = event || window.event;
            //獲取鼠標在頁面上的位置
            var pageX = event.pageX || event.clientX + document.documentElement.scrollLeft;
            var pageY = event.pageY || event.clientY + document.documentElement.scrollTop;
              var left1 = pageX - boxX;
              var top1 = pageY - boxY;
            //根據(jù)鼠標位置設(shè)置盒子位置
            $(".d-box").css("left",left1)
            $(".d-box").css("top",top1 )
          
            window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();

        });

        $(document).mouseup(function(){
            $(document).unbind("mousemove");
       
        })
    })

<div class="d-box" id="d_box">
         <div class="hd" id="drop">注冊信息 (可以拖拽)<span id="box_close">【關(guān)閉】</span>  </div>             
       <div class="bd"></div>
</div>