1
var autumn = document.querySelector('.autumn');
2
autumn.style.position = 'relative';
3

4
autumn.addEventListener('click', function() {
5
  this.style.left = (this.offsetLeft + 5) + 'px';
6
}, false);

['transform', 'webkitTransform', 'MozTransform', 'msTransform', 'OTransform']

10
// 获取当前浏览器支持的transform兼容写法
20
function getTransform() {
30
  var transform = '',
40
    divStyle = document.createElement('div').style,
50
    _transforms = ['transform', 'webkitTransform', 'MozTransform', 'msTransform', 'OTransform'],
60
    i = 0,
70
    len = _transforms.length;
80

90
  for (; i < len; i++) {
10
    if (_transforms[i] in divStyle) {
11
      // 找到之后立即返回，结束函数
12
      return transform = _transforms[i];
13
    }
14
  }
15

16
  // 如果没有找到，就直接返回空字符串
17
  return transform;
18
}

1
function getStyle(elem, property) {
2
  // ie通过currentStyle来获取元素的样式，其他浏览器通过getComputedStyle来获取
3
  return document.defaultView.getComputedStyle ? document.defaultView.getComputedStyle(elem, false)[property] : elem.currentStyle[property];
4
}

10
function getTargetPos(elem) {
20
  var pos = { x: 0, y: 0 };
30
  var transform = getTransform();
40
  if (transform) {
50
    var transformValue = getStyle(elem, transform);
60
    if (transformValue == 'none') {
70
      elem.style[transform] = 'translate(0, 0)';
80
      return pos;
90
    } else {
10
      var temp = transformValue.match(/-?\d+/g);
11
      return pos = {
12
        x: parseInt(temp[4].trim()),
13
        y: parseInt(temp[5].trim())
14
      }
15
    }
16
  } else {
17
    if (getStyle(elem, 'position') == 'static') {
18
      elem.style.position = 'relative';
19
      return pos;
20
    } else {
21
      var x = parseInt(getStyle(elem, 'left') ? getStyle(elem, 'left') : 0);
22
      var y = parseInt(getStyle(elem, 'top') ? getStyle(elem, 'top') : 0);
23
      return pos = {
24
        x: x,
25
        y: y
26
      }
27
    }
28
  }
29
}

10
// pos = { x: 200, y: 100 }
20
function setTargetPos(elem, pos) {
30
  var transform = getTransform();
40
  if (transform) {
50
    elem.style[transform] = 'translate(' + pos.x + 'px, ' + pos.y + 'px)';
60
  } else {
70
    elem.style.left = pos.x + 'px';
80
    elem.style.top = pos.y + 'px';
90
  }
10
  return elem;
11
}

1
var autumn = document.querySelector('.autumn');
2

3
autumn.addEventListener('click', function () {
4
  var curPos = getTargetPos(this);
5
  setTargetPos(this, {
6
    x: curPos.x + 5,
7
    y: curPos.y
8
  });
9
}, false);

10
// 获取目标元素对象
20
var autumn = document.querySelector('.autumn');
30

40
// 声明2个变量用来保存鼠标初始位置的x，y坐标
50
var startX = 0;
60
var startY = 0;
70

80
// 声明2个变量用来保存目标元素初始位置的x，y坐标
90
var sourceX = 0;
10
var sourceY = 0;

10
// 获取当前浏览器支持的transform兼容写法
20
function getTransform() {}
30

40
// 获取元素属性
50
function getStyle(elem, property) {}
60

70
// 获取元素的初始位置
80
function getTargetPos(elem) {}
90

10
// 设置元素的初始位置
11
function setTargetPos(elem, potions) {}

10
function move(event) {
20
  // 获取鼠标当前位置
30
  var currentX = event.pageX;
40
  var currentY = event.pageY;
50

60
  // 计算差值
70
  var distanceX = currentX - startX;
80
  var distanceY = currentY - startY;
90

10
  // 计算并设置元素当前位置
11
  setTargetPos(autumn, {
12
    x: (sourceX + distanceX).toFixed(),
13
    y: (sourceY + distanceY).toFixed()
14
  })
15
}
16

17
function end(event) {
18
  document.removeEventListener('mousemove', move);
19
  document.removeEventListener('mouseup', end);
20
  // do other things
21
}

1
;
2
(function() {
3
  ...
4
})();

100
;
200
(function () {
300
  // 这是一个私有属性，不需要被实例访问
400
  var transform = getTransform();
500

600
  function Drag(selector) {
700
    // 放在构造函数中的属性，都是属于每一个实例单独拥有
800
    this.elem = typeof selector == 'Object' ? selector : document.getElementById(selector);
900
    this.startX = 0;
100
    this.startY = 0;
110
    this.sourceX = 0;
120
    this.sourceY = 0;
130

140
    this.init();
150
  }
160

170

180
  // 原型
190
  Drag.prototype = {
200
    constructor: Drag,
210

220
    init: function () {
230
      // 初始时需要做些什么事情
240
      this.setDrag();
250
    },
260

270
    // 稍作改造，仅用于获取当前元素的属性，类似于getName
280
    getStyle: function (property) {
290
      return document.defaultView.getComputedStyle ? document.defaultView.getComputedStyle(this.elem, false)[property] : this.elem.currentStyle[property];
300
    },
310

320
    // 用来获取当前元素的位置信息，注意与之前的不同之处
330
    getPosition: function () {
340
      var pos = { x: 0, y: 0 };
350
      if (transform) {
360
        var transformValue = this.getStyle(transform);
370
        if (transformValue == 'none') {
380
          this.elem.style[transform] = 'translate(0, 0)';
390
        } else {
400
          var temp = transformValue.match(/-?\d+/g);
410
          pos = {
420
            x: parseInt(temp[4].trim()),
430
            y: parseInt(temp[5].trim())
440
          }
450
        }
460
      } else {
470
        if (this.getStyle('position') == 'static') {
480
          this.elem.style.position = 'relative';
490
        } else {
500
          pos = {
510
            x: parseInt(this.getStyle('left') ? this.getStyle('left') : 0),
520
            y: parseInt(this.getStyle('top') ? this.getStyle('top') : 0)
530
          }
540
        }
550
      }
560

570
      return pos;
580
    },
590

600
    // 用来设置当前元素的位置
610
    setPostion: function (pos) {
620
      if (transform) {
630
        this.elem.style[transform] = 'translate(' + pos.x + 'px, ' + pos.y + 'px)';
640
      } else {
650
        this.elem.style.left = pos.x + 'px';
660
        this.elem.style.top = pos.y + 'px';
670
      }
680
    },
690

700
    // 该方法用来绑定事件
710
    setDrag: function () {
720
      var self = this;
730
      this.elem.addEventListener('mousedown', start, false);
740
      function start(event) {
750
        self.startX = event.pageX;
760
        self.startY = event.pageY;
770

780
        var pos = self.getPosition();
790

800
        self.sourceX = pos.x;
810
        self.sourceY = pos.y;
820

830
        document.addEventListener('mousemove', move, false);
840
        document.addEventListener('mouseup', end, false);
850
      }
860

870
      function move(event) {
880
        var currentX = event.pageX;
890
        var currentY = event.pageY;
900

910
        var distanceX = currentX - self.startX;
920
        var distanceY = currentY - self.startY;
930

940
        self.setPostion({
950
          x: (self.sourceX + distanceX).toFixed(),
960
          y: (self.sourceY + distanceY).toFixed()
970
        })
980
      }
990

100
      function end(event) {
101
        document.removeEventListener('mousemove', move);
102
        document.removeEventListener('mouseup', end);
103
        // do other things
104
      }
105
    }
106
  }
107

108
  // 私有方法，仅仅用来获取transform的兼容写法
109
  function getTransform() {
110
    var transform = '',
111
      divStyle = document.createElement('div').style,
112
      transformArr = ['transform', 'webkitTransform', 'MozTransform', 'msTransform', 'OTransform'],
113

114
      i = 0,
115
      len = transformArr.length;
116

117
    for (; i < len; i++) {
118
      if (transformArr[i] in divStyle) {
119
        return transform = transformArr[i];
120
      }
121
    }
122

123
    return transform;
124
  }
125

126
  // 一种对外暴露的方式
127
  window.Drag = Drag;
128
})();
129

130
// 使用：声明2个拖拽实例
131
new Drag('target');
132
new Drag('target2');

1
// 通过扩展方法将拖拽扩展为jQuery的一个实例方法
2
(function ($) {
3
  $.fn.extend({
4
    canDrag: function () {
5
      new Drag(this[0]);
6
      return this;   // 注意：为了保证jQuery所有的方法都能够链式访问，每一个方法的最后都需要返回this，即返回jQuery实例
7
    }
8
  })
9
})(jQuery);

$('target').canDrag();