码迷,mamicode.com
首页 > Web开发 > 详细

js实现拖拽

时间:2017-11-16 18:33:33      阅读:203      评论:0      收藏:0      [点我收藏+]

标签:transform   设置   ini   getc   构造函数   imu   user   tofixed   match   

用原生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实现拖拽

标签:transform   设置   ini   getc   构造函数   imu   user   tofixed   match   

原文地址:http://www.cnblogs.com/zhaobao1830/p/7845464.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!