最近新學(xué)了拖拽效果，沒有好記性，只好用爛筆頭記錄一下了。首先講講拖拽的思路（只分析水平方向，垂直方向類似）：

思維圖

1. 首先就是布局，移動物體無非兩種方式：滾動以及定位。當(dāng)拖動內(nèi)容小于父元素時，使用定位；反之則使用滾動。（demo為小于父元素，所以使用定位）
2. 當(dāng)mousedown 時，記錄下鼠標(biāo)clientX以及元素offerLeft在document中的位置，然后得到元素距離差 leftInDrag = clientX - offerLeft
   ps：若是body內(nèi)容過大，產(chǎn)生了滾動條，還需要加上scrollLeft，即 leftInDrag = clientX - offerLeft + scrollLeft
3. 當(dāng)鼠標(biāo)移動時，用鼠標(biāo)所在位置減去距離差即得到元素位置oDragLeft = clientX - leftInDrag
4. 臨界值判斷，這就要和窗口大小做比較了
5. 既然是拖拽，那就是要確保元素移動的時候是一直按著鼠標(biāo)的
6. 加一點tween.js做做動效：即當(dāng)把物體拖到中間放手時，物體會退回兩旁

首先要布局

<div class="drag"></div>
樣式布局如下：

  *{
    margin: 0;padding: 0;
}
body{
    width: 2000px;
    height: 2000px;
} //假設(shè)內(nèi)容超出窗口
.drag{
    position: absolute;
    left: 100px;
    top:100px;
    width: 100px;height: 100px;
    background: #cde;
    cursor: move;
}

接下來就是js樣式了，說了要加一點tween.js玩玩，自然是要先引入進(jìn)來的

<script src="js/tween.js"></script>

主體js代碼

第一步就是初始化

     var oDrag = document.getElementsByClassName('drag')[0];
     var scrollLeft,scrollTop,leftInDrag,TopInDrag,x,y;
     var moveTimer = null; //運行tween的計時器

然后就是設(shè)置鼠標(biāo)按下并移動的事件

          oDrag.onmousedown = function(e){
                var e = e||window.event;
                //瀏覽器默認(rèn)當(dāng)鼠標(biāo)移動時，滾動條也會跟著動，所以要阻止默認(rèn)事件
                e.preventDefault();
                //記錄鼠標(biāo)在拖拽方塊內(nèi)的位置
                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;
                    //阻止默認(rèn)事件
                    e.preventDefault();
                    x = e.clientX - leftInDrag;
                    y = e.clientY - TopInDrag;
                    //臨界值判斷，當(dāng)元素超出窗口大小時，把元素位置定在窗口的最小/最大值
                    x = x <= 0 ? 0 : x;
                    if(x >= document.documentElement.clientWidth-oDrag.offsetWidth){
                        x = document.documentElement.clientWidth-oDrag.offsetWidth;
                    }
                    y = Math.max(y,0);//這個語句得到的結(jié)果和if判斷一樣，只是本人手懶，想少敲幾個代碼
                    y = Math.min(y,(document.documentElement.clientHeight-oDrag.offsetHeight));
                    oDrag.style.left = x + scrollLeft + 'px';
                    oDrag.style.top = y + scrollTop + 'px';
                }
            }

以上代碼已經(jīng)能夠使元素跟著鼠標(biāo)移動了，但是鼠標(biāo)沒有按下時元素也會隨著移動，所以要做一點限制：

     document.onmouseup = function(){
            oDrag.onmousemove = null;
      }

好啦，接下來是比較好玩的環(huán)節(jié)啦，當(dāng)鼠標(biāo)彈起時，元素會自動彈到窗口兩旁

          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的使用方法可以戳這里