效果
便签可以在视口移动, 但不会超出视口.
步骤
- mousedown 事件 开始监听
- mousemove 事件 记录鼠标移动轨迹
- 改变 note left top 位置
- 安全边界检查
- keyup 事件 取消监听
结构
记录信息
onmousedown 鼠标按下
- 视口宽高
- 鼠标按下位置X,Y
- 便签宽高
- 计算安全边界值(maxLeft,maxTop)
onmousemove 鼠标按下移动
- 记录偏移量(e.clientX-鼠标按下时X)
- 计算便签位置,加偏移量
- 便签安全边界判定
- 便签移动位置
onmouseup 鼠标抬起
- 清除
onmousemove事件 - 清除
onmouseup事件
边界检查
note 的最大移动宽度, 最大移动高度为绿色区域
maxLeft = 视口宽度 - div实际宽度
maxTop = 视口高度 - div实际高度
