js实现拖拽
用原生Js实现的拖拽效果
1 <!DOCTYPE html> 2 <html lang="zh"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="x-ua-compatible" content="ie=edge"> 6 <title>封装拖拽</title> 7 <meta name="viewport" content="width=device-width, initial-scale=1，minimum-scale=1,maximum-sacle=1，user-scalable=no"> 8 <style> 9 div#target{ 10 width: 100px; 11 height: 100px; 12 position: relative; 13 left: 0; 14 background-color: orange; 15 color: #fff; 16 text-align: center; 17 line-height: 100px; 18 margin: 5px; 19 cursor: pointer; 20 } 21 </style> 22 </head> 23 <body> 24 <div id="target"></div> 25 <script> 26 (function () { 27 // 这是一个私有属性，不需要被实例访问 28 var transform = getTransform(); 29 function Drag(selector) { 30 // 放在构造函数中的属性，都是属于每一个实例单独拥有 31 this.elem = typeof selector === 'object' ? selector : document.getElementById(selector); 32 this.startX = 0; 33 this.startY = 0; 34 this.sourceX = 0; 35 this.sourceY = 0; 36 37 this.init(); 38 } 39 40 Drag.prototype = { 41 constructor: Drag, 42 init: function () { 43 // 初始时需要做些什么事情 44 this.setDrag(); 45 }, 46 // 稍作改造，仅用于获取当前元素的属性，类似于getName 47 getStyle: function (property) { 48 return document.defaultView.getComputedStyle ? document.defaultView.getComputedStyle(this.elem, false)[property] : this.elem.currentStyle[property] 49 }, 50 // 用来获取当前元素的位置信息，注意与之前的不同之处 51 getPosition: function () { 52 var pos = {x: 0, y: 0}; 53 if (transform) { 54 var transformValue = this.getStyle(transform); 55 if (transformValue === 'none') { 56 this.elem.style[transform] = 'translate(0, 0)'; 57 } else { 58 var temp = transformValue.match(/-?\d+/g); 59 pos = { 60 x: parseInt(temp[4].trim()), 61 y: parseInt(temp[5].trim()) 62 } 63 } 64 } else { 65 if (this.getStyle('postion') === 'static') { 66 this.elem.style.position = 'relative'; 67 } else { 68 pos = { 69 x: parseInt(this.getStyle('left') ? this.getStyle('left') : 0), 70 y: parseInt(this.getStyle('top') ? this.getStyle('top') : 0) 71 } 72 } 73 } 74 return pos; 75 }, 76 // 用来设置当前元素的位置 77 setPostion: function (pos) { 78 if (transform) { 79 this.elem.style[transform] = 'translate('+ pos.x +'px, '+ pos.y +'px)'; 80 } else { 81 this.elem.style.left = pos.x + 'px'; 82 this.elem.style.top = pos.y + 'px'; 83 } 84 }, 85 // 该方法用来绑定事件 86 setDrag: function () { 87 var self = this; 88 this.elem.addEventListener('mousedown', start, false); 89 function start(event) { 90 self.startX = event.pageX; 91 self.startY = event.pageY; 92 93 var pos = self.getPosition(); 94 95 self.sourceX = pos.x; 96 self.sourceY = pos.y; 97 98 document.addEventListener('mousemove', move, false); 99 document.addEventListener('mouseup', end, false); 100 }; 101 function move(event) { 102 var currentX = event.pageX; 103 var currentY = event.pageY; 104 105 var distanceX = currentX - self.startX; 106 var distanceY = currentY - self.startY; 107 108 self.setPostion({ 109 x: (self.sourceX + distanceX).toFixed(), 110 y: (self.sourceY + distanceY).toFixed() 111 }) 112 }; 113 function end(event) { 114 document.removeEventListener('mousemove', move); 115 document.removeEventListener('mouseup', end); 116 } 117 } 118 } 119 // 私有方法，仅仅用来获取transform的兼容写法 120 function getTransform() { 121 var transform = '', 122 divStyle = document.createElement('div').style, 123 transformArr = ['transform', 'webkitTransform', 'MozTransform', 'msTransform', 'OTransform'] 124 for (var i = 0; i < transformArr.length; i++) { 125 if (transformArr[i] in divStyle) { 126 return transform = transformArr[i]; 127 } 128 } 129 return transform; 130 } 131 window.Drag = Drag; 132 })() 133 new Drag('target'); 134 </script> 135 </body> 136 </html>
