js系列三十二：封装一个拖拽对象

如何让一个DOM元素动起来

拖拽的本质就是让DOM元素跟着鼠标动起来。
设想一下，在页面中仅有一个元素class名为autumn的div标签，他的基本样式如下：

.autumn{
	width: 20px;
	height: 20px;
	background-color: orange;
}

思考一下，让.autumn运动（即让他的位置发生变化）可以通过哪些途径？
相信熟悉CSS的读者很快就能想到不少方法，例如改变.autumn的margin值，或者设置.autumn定位方式为relactive,修改其left/top属性，又或者直接修改它的translate的值。
但是通常情况下我们不会采用修改margin值的方式让元素的位置发生改变，以避免对其他元素造成影响。
这里修改left的为例，一起来实现元素每被点击一次就右移5像素的效果，代码如下：

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

但是当页面所处的环境支持CSS3属性 translate时，修改left/top会导致频繁的重排与回流，因此建议在处理元素的运动时修改translate

.autumn{
	transform: translateX(0px);
}

但是在使用translate时，就不得不面临一个兼容性问题，不同浏览器的兼容写法有以下几种：

['translate', "webkitTranslate", "MozTranslate", "msTransform", "OTrans