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>