drag

目标：实现鼠标的拖拽移动功能
实现方式：获取到鼠标在可以拖拽区域按下时鼠标与移动对象左上角的距离信息。拖拽时候鼠标和移动对象是相对静止的，根据这个可以实时改变移动对象的left和top值。就可以达到拖拽移动效果
小细节：
1、需要设置移动对象的position值为absolute
2、拖拽过程中有时候会选中移动对象内部的文字，影响拖拽，所以把移动对象设置成不可选中文字
3、onmousemove、onmouseup需要设置在document对象上，这样保证可以快速拖拽
4、我在做drag功能的时候同时也在做scale功能，scale功能也用到了document对象的onmousemove和onmouseup，会产生冲突，所以每次在绑定onmousemove和onmouseup之前都先保存当前的onmousemove和onmouseup功能。拖拽完成后再重新绑定原先的功能
5、在获取当前窗口高度的时候由于document.body获取的不是当前窗口高度产生了bug，应用document.documentElement获取
其他：目前功能写成了函数的形式，引入便可以对元素进行拖拽。但在实际情况中可能会产生各种各样的bug，随着我的学习我会不断完善这个函数的

flostLayer

目标：实现一个浮出层
实现方式：写好html结构，css样式。通过js将html完善好并注入到页面中。通过设置display值来控制浮出层的显示与隐藏
小细节：
1、通过传入一个预先设定好结构的object来设置浮出层的文字内容和一些基础配置
2、可以通过show(),remove()来控制浮出层的显示与隐藏
3、通过css的calc()进行居中
其他：可能发生id命名冲突导致bug

scale

目标：实现对一个div的拖拽放大缩小功能
实现方式：通过实时计算鼠标与div四边的距离信息来检测鼠标在哪个边界，来确定放大缩小的方式。在边界按下鼠标左键并进行拖拽，实时计算鼠标位置，重新设置div的width、height以及left、top。
小细节：
1、通过传入一个object来设定放大缩小范围，四边四角哪几个可以进行拖拽以及边界检测的灵敏度值
2、拖拽过程中有时候会选中移动对象内部的文字，影响拖拽，所以把移动对象设置成不可选中文字
3、需要设置div的position值为absolute
4、保存鼠标按下时候的边界值，这样不会因为拖拽过快离开边界而不会进行放大缩小
5、对某些重复使用的功能封装成了函数
6、事件绑定在document对象上
其他：会不断完善

代码和展示

1、drag

2、floatLayaer

3、scale