[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是会的

### 垂直方向


- 空白目录
- window
- location
- history
- DOM
- 什么是DOM
- JS盒子模型
- 13个核心属性
- DOM优化
- 回流与重绘
- 未整理
- 文档碎片
- DOM映射机制
- DOM库封装
- 事件
- 功能组件
- table
- 图片延迟加载
- 跑马灯
- 回到顶部
- 选项卡
- 鼠标跟随
- 放大镜
- 搜索
- 多级菜单
- 拖拽
- 瀑布流
- 数据类型的核心操作原理
- 变量提升
- 闭包(scope)
- this
- 练习题
- 各种数据类型下的常用方法
- JSON
- 数组
- object
- oop
- 单例模式
- 高级单例模式
- JS中常用的内置类
- 基于面向对象创建数据值
- 原型和原型链
- 可枚举和不可枚举
- Object.create
- 继承的六种方式
- ES6下一代js标准
- babel
- 箭头函数
- 对象
- es6勉强笔记
- 流程控制
- switch
- Ajax
- eval和()括号表达式
- 异常信息捕获
- 逻辑与和或以及前后自增
- JS中的异步编程思想
- 上云
- 优化技巧
- 跨域与JSONP
- 其它跨域相关问题
- console
- HTML、XHTML、XML
- jQuery
- zepto
- 方法重写和方法重载
- 移动端
- 响应式布局开发基础
- 项目一:创意简历