原生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';
        }
    }
}

下面是效果圖，樣式不是重點，故沒有設計