原生js拖拽效果

最近新学了拖拽效果，没有好记性，只好用烂笔头记录一下了。首先讲讲拖拽的思路（只分析水平方向，垂直方向类似）：

思维图

1. 首先就是布局，移动物体无非两种方式：滚动以及定位。当拖动内容小于父元素时，使用定位；反之则使用滚动。（demo为小于父元素，所以使用定位）
2. 当mousedown 时，记录下鼠标clientX以及元素offerLeft在document中的位置，然后得到元素距离差 leftInDrag = clientX - offerLeft
   ps：若是body内容过大，产生了滚动条，还需要加上scrollLeft，即 leftInDrag = clientX - offerLeft + scrollLeft
3. 当鼠标移动时，用鼠标所在位置减去距离差即得到元素位置oDragLeft = clientX - leftInDrag
4. 临界值判断，这就要和窗口大小做比较了
5. 既然是拖拽，那就是要确保元素移动的时候是一直按着鼠标的
6. 加一点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的使用方法可以戳这里