[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是会的  ### 垂直方向