用原生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>js实现拖拽
原文地址：http://www.cnblogs.com/zhaobao1830/p/7845464.html