js-drag 拖拽封装
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
; (function () { // 调用私有方法,获取transform var transform = getTransform(); function Drag(selector) { this.elem = typeof selector === 'object' ? selector : document.getElementById(selector); this.startX = 0; this.startY = 0; this.sourceX = 0; this.sourceY = 0; this.init(); } // 原型 Drag.prototype = { constructor: Drag, init: function () { // 初始化时需要做些什么事 this.setDrag(); }, getStyle: function (property) { // 仅用于获取当前元素的属性,类似于getName; return document.defaultView.getComputedStyle ? document.defaultView.getComputedStyle(this.elem, false)[property] : this.elem.currentStyle[property] }, // 获取当前元素的位置信息 getPosition: function () { var pos = { x: 0, y: 0 }; if (transform) { var transformValue = this.getStyle(transform); if (transformValue === 'none') { this.elem.style[transform] = 'translate(0,0)'; } else { var temp = transformValue.match(/-?\d+/g); pos = { x: parseInt(temp[4].trim()), y: parseInt(temp[5].trim()) }; } } else { if (this.getStyle('position') == 'static') { this.elem.style.position = 'relative'; } else { pos = { x: parseInt(this.getStyle('left') ? this.getStyle('left') : 0), y: parseInt(this.getStyle('top') ? this.getStyle('top') : 0) } } } return pos; }, setPostion: function (pos) { if (transform) { this.elem.style[transform] = 'translate(' + pos.x + 'px, ' + pos.y + 'px)'; } else { this.elem.style.left = pos.x + 'px'; this.elem.style.top = pos.y + 'px'; } }, // 该方法用来绑定事件 setDrag: function () { var self = this; this.elem.addEventListener('mousedown', start, false); function start(event) { self.startX = event.pageX; self.startY = event.pageY; var pos = self.getPosition(); self.sourceX = pos.x; self.sourceY = pos.y; document.addEventListener('mousemove', move, false); document.addEventListener('mouseup', end, false); } function move(event) { var currentX = event.pageX; var currentY = event.pageY; var distanceX = currentX - self.startX; var distanceY = currentY - self.startY; // 窗体宽度高度 var h = window.innerHeight; var w = window.innerWidth; // 元素宽度高度 var dw = document.getElementById('drag').offsetWidth; var dh = document.getElementById('drag').offsetHeight; // 边界判断 self.setPostion({ x: ((self.sourceX + distanceX) <= 0 ? 0 : ((self.sourceX + distanceX) >= w - dw) ? w - dw : self.sourceX + distanceX).toFixed(), y: ((self.sourceY + distanceY) <= 0 ? 0 : ((self.sourceY + distanceY) >= h - dh) ? h - dh : self.sourceY + distanceY).toFixed() }) } function end(event) { document.removeEventListener('mousemove', move); document.removeEventListener('mouseup', end); // do other things } } } // 私有方法,获取transform的兼容写法 function getTransform() { var transform = '', divStyle = document.createElement('div').style, transformArr = ['transform', 'webkitTransform', 'MozTransform', 'msTransform', 'OTransform'], i = 0, len = transformArr.length; for (; i < len; i++) { if (transformArr[i] in divStyle) { return transform = transformArr[i]; } } return transform; } // 一种对外暴露的方式 window.Drag = Drag; })();
// 引用
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{ padding: 0; margin: 0; } #drag { width: 100px; height: 100px; background-color: firebrick; cursor: move; } </style> </head> <body> <div id="drag"></div> <script src="js/drag.js"></script> <script> new Drag('drag'); </script> </body> </html>
// 参考地址