一般我们实现拖拽对象，都是对单个元素进行封装，但是如果有多个元素都要实现拖拽效果，代码量就会十分庞大，所以我们可以结合面向对象的思想和闭包等知识，封装一个拖拽对象。
基本思路：
1、如何让元素动起来？
我们通常通过修改元素的left,top,translate来让元素的位置改变。但是由于修改left,top值会引起页面重绘，而translate不会，因此从性能优化方面考虑，一般会选择translate属性。
2、获取当前浏览器支持的translate兼容写法
3、获取元素的当前位置getStyle(elem,property)和getTargetPos(elem)和setTargetPos(elem,pos)
4、拖拽
-
mousedown
(1)、获取鼠标初始位置
(2)、获取目标元素初始位置
(3)、绑定mousemove和mouseup -
mousemove
(1)、获取当前鼠标的位置
(2)、计算鼠标移动差值
(3)、通过差值计算目标元素当前位置
(4)、设置目标元素的位置 -
mouseup
(1)、解除mousemove和mouseup的绑定
(2)、做其他需要在拖拽之后完成的事情
实现过程
1、为了避免变量污染，我们需要将模块设置于一个函数自执行方式模拟的块级作用域中。
;(function(){
...
})()
2、构建一个拖拽对象drag，分别在构造函数，原型，和模块作用域中设置方法和属性。
(1)、首先在模块作用域中定义一个getTransform方法，只供模块里面的对象使用，不对外使用。
;(function(){
var transform = getTransform();
// 私有方法，仅仅用来获取transform的兼容写法
function getTransform() {
var transform = '',
divStyle = document.createElement('div').style,
transformArr = ['transform', 'webkitTransform', 'MozTransform', 'msTransform', 'OTransform'],
i = 0,
len = transformArr.length;
for(; i < len; i++) {
if(transformArr[i] in divStyle) {
return transform = transformArr[i];
}
}
return transform;
}
})()
(2)、然后通过构造函数模式构造一个drag对象，并且在构造函数中定义属性和方法，这些属性和方法，所有不同实例都不一样的。
function Drag(selector){
//获取元素
this.elem = typeof selector == 'object'?selector:document.getElementById(selector);
初始位置
this.startX = 0;
this.startY = 0;
//目标位置
this.sourceX = 0;
this.sourceY = 0;
//实例初始化函数
this.init();
}
(3)、然后再原型中定义方法，让所有实例都共享这些方法
* 获取元素指定样式的方法getStyle(property)
getStyle:function(property){
return document.defaultView.getComputedStyle()?document.defaultView.getComputedStyle(elem,false)[property]:this.elem.currentStyle[property];
}
* 获取当前元素的位置信息getPosition()
//用来获取当前元素的位置信息
getPosition:function(){
var pos ={x:0,y:0};
if(transform){
var transformVaule = this.getStyle(transform);
if(transformVaule == 'none'){
this.elem.style[transform] = 'translate(0,0)';
}else{
var temp = transformVaule.match(/-?d+/g);
pos = {
x:parseInt(temp[4].trim()),
y:parseInt(temp[5].trim())
}
}
}else{
if(this.getStyle('position') == 'static'){
this.elem.style.position = 'relative';
} else{
pos = {
x:parseInt(this.getStyle('left')?this.getStyle('left'):0),
y:parseInt(this.getStyle('right')?this.getStyle('right'):0)
}
}
}
return pos;
}
* 设置当前元素的位置setPosition(pos)
//用来设置当前元素的位置
setPosition:function(pos){
if(transform){
this.elem.style[transform] = "translate('+pos.x+'px,'+pos.y+'px)"
} else{
this.elem.style.left = pos.x + 'px';
this.elem.style.right = pos.y + 'px';
}
}
* 绑定拖拽事件的方法setDrag
//该方法用来绑定事件
setDrag:function(){
var self = this;
this.elem.addEventListener('mousedown',start,false);
function start(event){
self.startX = event.pageX;
self.startY = event.pageY;
var pos = self.getPosition();
self.sourceX = pos.x;
self.sourceY = pos.y;
document.addEventListener('mousemove',move,false);
document.addEventListener('mouseup',end,false);
}
function move(event){
var currentX = event.pageX;
var currentY = event.pageY;
var distanceX = currentX - self.startX;
var distanceY = currentY - self.startY;
self.setPosition({
x:(self.sourceX + distanceX).toFixed(),
y:(self.sourceY + distanceY).toFixed()
})
}
function end(Event){
document.removeEventListener('mousemove',move);
document.removeEventListener('mouseup',end);
}
}
3、利用闭包将模块暴露出去
window.Drag = Drag;
调用方法
new Drag("div");