微信的浮窗,大伙应该都用过,当我们正在阅读一篇公众号文章时,突然需要处理微信消息,点击浮窗,在微信上会有个浮标,点击浮标可以再次回到文章。
我们今天打算撸一个类似微信的浮标组件,我们期望组件有以下功能
支持拖拽
支持左右吸附
支持页面上下滑动时隐藏
效果预览
拖拽事件
浮标的核心功能的就是拖拽,对鼠标或移动端的触摸的事件来说,有三个阶段,鼠标或手指接触到元素时,鼠标或手指在移动的过程,鼠标或手指离开元素。这个三个阶段对应的事件名称如下:
mouse: {
start: 'mousedown',
move: 'mousemove',
stop: 'mouseup'