H5浮动按钮需三步实现安全拖拽与吸边：一、设对视口确保坐标系一致；二、按安全边距计算有效活动区域；三、用阈值缓动实现自然吸附，并动态避让内容与键盘。
要让 H5 浮动按钮在移动端既能自由拖拽、又能在靠近边缘时自动“吸边”，同时不超出内容安全区域（即不遮挡关键信息、不被系统 UI 截断），核心是三件事：正确设置视口、精准计算可拖动范围、实现带缓冲区的吸附逻辑。
一、视口必须设对，否则拖拽坐标全乱
很多拖拽卡顿或位置偏移，根源不在 JS，而在视口没对齐设备真实逻辑像素。必须加这行 meta：
重点不是禁缩放，而是 width=device-width 让布局视口等于设备逻辑宽度（如 iPhone 14 是 390px），这样 clientWidth 和 touch.clientX 才在同一坐标系。漏掉这句，拖拽时按钮会“漂移”或吸附失效。
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
二、拖拽边界要预留安全边距，不能贴死屏幕边缘
真机上，底部常有 iOS 安全域（Home Indicator）或安卓手势条，顶部可能有状态栏。直接用 body.clientWidth 当最大值，按钮容易被系统 UI 遮住或误触。建议按如下方式算有效活动区域：
- 左边界：留出 12–16px（避免紧贴屏幕左缘，影响手指抓取）
- 右边界：
screenWidth - 按钮宽度 - 12px - 上边界：从 75px 起算（避开状态栏+留出手指操作空间）
- 下边界：
screenHeight - 按钮高度 - 80px（iOS 安全域约 34px，安卓手势条约 80px，保守取 80）
代码中用 window.screen.width / height 比 document.body.clientWidth 更稳定，尤其在页面有滚动或缩放时。
三、吸附不是“到边就停”，而是“靠近就缓动贴合”
用户拖着按钮快到边缘时，如果突然卡死，体验生硬。真正好用的吸附，是进入某个“吸附阈值”（比如距离边缘 ≤ 40px）后，松手时自动滑向最近边缘，并带轻微位移动画。实现要点：
- 监听
touchend，获取松手时的left和top - 分别判断离左/右/上/下四边的距离，选最小值
- 若最小距离 ≤ 40px，则将按钮定位到对应边缘（如靠左：
left = 12px；靠下：top = screenHeight - btnH - 80px） - 用
transform: translate()+transition实现 0.2s 缓动，比直接改left/top更流畅
四、防止遮挡内容，要动态感知页面滚动与焦点
浮动按钮始终 fixed 定位，但用户滚动页面时，它可能盖住标题、表单输入框甚至键盘。解决方法：
- 监听
scroll事件，当按钮覆盖了input、textarea或当前聚焦元素时，临时设z-index: 1降级，或平滑移开 30px - 在软键盘弹起时（
focusinon input），把按钮移到键盘上方（可通过window.visualViewport?.height判断可视区域变化） - 给按钮加
pointer-events: auto，父容器设pointer-events: none，避免干扰底层点击
