js面向对象思想封装拖拽功能，兼容pc和移动端

我们在开发项目过程中，很可能会碰到页面上某块需要可以拖拽移动的功能需求，网上已经有不少前辈分享了相关功能的案例，插件或者代码，但是考虑到项目功能需求，我们可能仅需要实现拖拽移动功能就可以，不需要其他功能，而网上很多插件往往附带了其他功能需求。这里笔者仅对拖拽移动这一功能进行实现，并且采用了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文件