最近新学了拖拽效果，没有好记性，只好用烂笔头记录一下了。首先讲讲拖拽的思路（只分析水平方向，垂直方向类似）：
思维图
- 首先就是布局，移动物体无非两种方式：滚动以及定位。当拖动内容小于父元素时，使用定位；反之则使用滚动。（demo为小于父元素，所以使用定位）
- 当mousedown 时，记录下鼠标clientX以及元素offerLeft在document中的位置，然后得到元素距离差 leftInDrag = clientX - offerLeft
ps：若是body内容过大，产生了滚动条，还需要加上scrollLeft，即 leftInDrag = clientX - offerLeft + scrollLeft - 当鼠标移动时，用鼠标所在位置减去距离差即得到元素位置oDragLeft = clientX - leftInDrag
- 临界值判断，这就要和窗口大小做比较了
- 既然是拖拽，那就是要确保元素移动的时候是一直按着鼠标的
- 加一点tween.js做做动效：即当把物体拖到中间放手时，物体会退回两旁
首先要布局
<div class="drag"></div>
样式布局如下：
*{
margin: 0;padding: 0;
}
body{
width: 2000px;
height: 2000px;
} //假设内容超出窗口
.drag{
position: absolute;
left: 100px;
top:100px;
width: 100px;height: 100px;
background: #cde;
cursor: move;
}
接下来就是js样式了，说了要加一点tween.js玩玩，自然是要先引入进来的
<script src="js/tween.js"></script>
主体js代码
第一步就是初始化
var oDrag = document.getElementsByClassName('drag')[0];
var scrollLeft,scrollTop,leftInDrag,TopInDrag,x,y;
var moveTimer = null; //运行tween的计时器
然后就是设置鼠标按下并移动的事件
oDrag.onmousedown = function(e){
var e = e||window.event;
//浏览器默认当鼠标移动时，滚动条也会跟着动，所以要阻止默认事件
e.preventDefault();
//记录鼠标在拖拽方块内的位置
scrollLeft = document.body.scrollLeft||document.documentElement.scrollLeft;
scrollTop = document.body.scrollTop||document.documentElement.scrollTop;
leftInDrag = e.clientX - oDrag.offsetLeft + scrollLeft;
TopInDrag = e.clientY - oDrag.offsetTop + scrollTop;
oDrag.onmousemove = function(e){
var e = e||window.event;
//阻止默认事件
e.preventDefault();
x = e.clientX - leftInDrag;
y = e.clientY - TopInDrag;
//临界值判断，当元素超出窗口大小时，把元素位置定在窗口的最小/最大值
x = x <= 0 ? 0 : x;
if(x >= document.documentElement.clientWidth-oDrag.offsetWidth){
x = document.documentElement.clientWidth-oDrag.offsetWidth;
}
y = Math.max(y,0);//这个语句得到的结果和if判断一样，只是本人手懒，想少敲几个代码
y = Math.min(y,(document.documentElement.clientHeight-oDrag.offsetHeight));
oDrag.style.left = x + scrollLeft + 'px';
oDrag.style.top = y + scrollTop + 'px';
}
}
以上代码已经能够使元素跟着鼠标移动了，但是鼠标没有按下时元素也会随着移动，所以要做一点限制：
document.onmouseup = function(){
oDrag.onmousemove = null;
}
好啦，接下来是比较好玩的环节啦，当鼠标弹起时，元素会自动弹到窗口两旁
oDrag.onmouseup = function(){
oDrag.onmousemove = null;
var start,end,change,step = 1;
if(x>=(document.documentElement.clientWidth-oDrag.offsetWidth)/2){
end = document.documentElement.clientWidth-oDrag.offsetWidth;
stepMax = Math.floor(end);
}else{
end = 0;
stepMax = Math.floor(x);
}
change = end - x;
moveTimer = setInterval(function(){
step++;
if(step == stepMax){
clearInterval(moveTimer);
moveTimer = null;
}
oDrag.style.left = Tween.Bounce.easeIn(step,x,change,stepMax) + scrollLeft + 'px';
},5);
}
今天的笔记就做到这里了，另：tween.js也没什么好讲的，会使用就成了.Tween的使用方法可以戳这里
