我們在開發專案過程中，很可能會碰到頁面上某塊需要可以拖拽移動的功能需求，網上已經有不少前輩分享了相關功能的案例，外掛或者程式碼，但是考慮到專案功能需求，我們可能僅需要實現拖拽移動功能就可以，不需要其他功能，而網上很多外掛往往附帶了其他功能需求。這裡筆者僅對拖拽移動這一功能進行實現，並且採用了js面向物件的思想來實現，請各位讀者品鑑，有不足之處還望指正。

function Drag(dom) {
    this.dom = document.getElementById(dom);
    this.flag = false;
    var self = this;
    var sty = null
 
;
    if(window.getComputedStyle) {
        sty = window.getComputedStyle(self.dom, null); // 非IE
    } else {
        sty = self.dom.currentStyle; // IE
    }
    this.maxLeft = document.documentElement.clientWidth - sty.width.split('px')[0]; //當前元素可移動的最大左偏移
    this.maxTop = document.documentElement.clientHeight - sty.height.split('px'
 
)[0]; //當前元素可移動的最大上偏移

    self.dom.addEventListener("mousedown", function(e) {
        self.down(self);
    }, false);
    self.dom.addEventListener("touchstart", function(e) {
        self.down(self);
    }, false)

}
//按下
Drag.prototype.down = function(self) {
    self.flag = true;
    var touch;
    if
 
(event.touches) {
        touch = event.touches[0];
    } else {
        touch = event;
    }
    var offLeft = touch.clientX - self.dom.offsetLeft;//當前點選點相對元素左邊框的距離
    var offTop = touch.clientY - self.dom.offsetTop;//當前點選點相對元素上邊框的距離

    self.dom.addEventListener("mousemove", function() {
        self.move(self,offLeft,offTop);
    }, false);
    self.dom.addEventListener("touchmove", function() {
        self.move(self,offLeft,offTop);
    }, false)
    document.body.addEventListener("mouseup", function() {
        self.end(self);
    }, false);
    self.dom.addEventListener("touchend", function() {
        self.end(self);
    }, false);
}
//移動
Drag.prototype.move = function(self,offLeft,offTop) {
    if(self.flag) {
        var touch;
        if(event.touches) {
            touch = event.touches[0];
        } else {
            touch = event;
        }
        var endX = touch.clientX - offLeft;//元素移動後的left距離
        var endY = touch.clientY - offTop;//元素移動後的top距離
        if(endX <= 0) {
            endX = 0;
        } else if(endX >= self.maxLeft) {
            endX = self.maxLeft;
        }
        if(endY <= 0) {
            endY = 0;
        } else if(endY >= self.maxTop) {
            endY = self.maxTop;
        }

        self.dom.style.left = endX + "px";
        self.dom.style.top = endY + "px";

        //阻止頁面的滑動預設事件
        document.addEventListener("touchmove", function() {
            event.preventDefault();
        }, false);
    }
}
//釋放
Drag.prototype.end = function(self) {
    self.flag = false;
}

以一個id為box的div為例，實現該功能時只需要在window.onload內按如下方式宣告就可以：

window.onload = function(){
    new Drag('box');
}

在移動端和PC網頁上均可以達到理想效果，讀者感興趣可以自行嘗試。
檔案下載處：
感興趣的讀者可以直接去下載js檔案