• 鼠标跟随（鼠标☞在元素的中心，缓动动画慢慢移动）
  开始位置 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>

• 拖拽（盒子的位置设置为，鼠标位置-鼠标在盒子里面位置）
  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;//鼠标在盒子中的竖直位置
        //按下后变为可拖动状态 鼠标移动后 让盒子跟着鼠标移动
        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;
            //根据鼠标位置设置盒子位置
            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;//鼠标在盒子中的竖直位置
        // //按下后变为可拖动状态 鼠标移动后 让盒子跟着鼠标移动
        $(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;
            //根据鼠标位置设置盒子位置
            $(".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">【关闭】</span>  </div>             
       <div class="bd"></div>
</div>