原生JS实现拖拽文本框的效果

主要功能代码如下

点下面这个超链接去我的github下载这个文件，打开即可运行
点此处下载

var d_box = document.getElementById('d_box');
var drop = document.getElementById('drop');
//鼠标在box中头部按下的时候 计算鼠标在盒子中的坐标
// 给头部注册鼠标按下的事件
drop.onmousedown = function (e) {
    e = e || event;
    //计算鼠标在盒子中的坐标=鼠标在页面中的坐标-盒子在页面中的坐标
    var x = getPage(e).pageX - d_box.offsetLeft;
    var y = getPage(e).pageY - d_box.offsetTop;

    //鼠标在整个页面移动的过程中,计算盒子在页面中的坐标位置
    document.onmousemove = function (e) {
        //计算盒子在页面中的坐标=鼠标在页面上的坐标-鼠标在盒子上的坐标
        var boxX = getPage(e).pageX - x;
        var boxY = getPage(e).pageY - y;
        // 不让这个盒子的头部出了body 不然出去就回不来了
        if (boxX >= 0 && boxY >= 0) {
            d_box.style.left = boxX + 'px';
            d_box.style.top = boxY + 'px';
        }
    }
}

下面是效果图，样式不是重点，故没有设计