[toc]  ## 拖拽原理 當鼠標在盒子上按下的時候，我們可以開始拖拽（給盒子綁定onmousemove和onmouseup） 當鼠標移動的時候，我們計算盒子的最新位置 當鼠標抬起的時候說明拖拽已經結束了，我們的move和up就沒用了，我們在把這兩個方法移除 ``` *{ margin:0; padding:0; } html,body{ width:100%; height:100%; } #box{ posiition:absolute; top:50%; left:50%; margin:-100px 0 0 -100px; width:200px; height:200px; background:#ff6600; cursor:move; } ``` ``` <div id="box"></div> ``` ``` //->JS實現讓當前的元素在屏幕居中 var box = document.getElementById("box"); box.style.top = ((document.documentElement.clientHeight||document.body.clientHeight)-box.offsetHeight) /2 +"px"; box.style.left = ((document.documentElement.clientWidth||document.body.clientWidth)-box.offsetWidth) /2 +"px"; ``` ``` box.onmousedown = down; function down(e){ e = e || window.event; //->記錄開始位置的信息 this["strX"] = e.clientX; this.["strY"] = e.clientY; this.["strL"] = parseFloat(this.style.left); this.["strT"] = parseFloat(this.style.top); this.onmousemove = move; this.onmouseup = up; } function move(e){ e = e||window.event; var curL = (e.clientX - this["strX"])+this["strL"]; var curT = (e.clientY - this["strY"])+this["strT"]; //->邊界判斷 var minL = 0 ,minT = 0 ,maxL = (document.documentElement.clientWidth||document.body.clientWidth)-this.offsetWidth ,maxT= (document.documentElement.clientHeight||document.body.clientHeight)-this.offsetHeight; curL = curl<minL?minL:(curL>maxL?maxL:curL); curlT = curT<minT?minT:(curT>maxT?maxT:curT); this.style.left = curL + "px"; this.style.top = curT + "px"; } function up(e){ this.onmouseup = this.onmousemove = null; } ``` ## 移動快慢 同等距離，移動得越快`move`事件觸發的次數越少 瀏覽器對于每一次move行為的觸發都是有一個最小時間的 ## 彈性勢能動畫 ### 水平方向 水平方向移動的速度和移動的距離沒有必要聯系，和開始拖拽的的速度也沒有必然聯系，只和最后一次即將松開的那一瞬間鼠標的速度是有關系的，**最后瞬間**鼠標如果移動得快，我們水平運動的距離和水都也是比較大的      #### 在飛的情況下點擊捕獲盒子  #### offsetLeft和style.xx offset系列獲取的值都是計算過后的值（四舍五入），永遠不會出現小數，但style.xxx是會的  ### 垂直方向