Element Plus 中如何实现可拖动的悬浮球组件？

Question

在 Element Plus 中实现可拖动悬浮球时，常见问题是：**拖拽过程中悬浮球位置偏移、鼠标松开后无法停止拖拽、或与 El-Drawer/El-Dialog 等遮罩层冲突导致 z-index 失效**。根本原因在于未正确监听 `mousedown`/`mousemove`/`mouseup` 原生事件，缺乏坐标计算（如 `clientX - offsetLeft`）、未解绑全局事件导致多次绑定，且未处理 `user-select: none` 防止文字选中干扰，也常忽略 `pointer-events: auto` 在禁用元素上的覆盖问题。此外，Element Plus 组件默认使用 `position: fixed` 或 `absolute`，若父容器设置了 `transform`、`perspective` 或 `filter`，会创建新的定位上下文，导致 `fixed` 定位异常漂移。如何在不侵入 Element Plus 源码的前提下，封装一个轻量、响应式、支持边界限制和持久化坐标的 Vue 3 + Composition API 悬浮球组件？

Answer 1

```html

一、现象层：典型故障表征与用户可感知问题

• 拖拽中悬浮球“甩飞”或滞后于鼠标指针（视觉偏移 > 20px）
• 松开鼠标后仍持续响应 move 事件，出现“幽灵拖拽”
• 在 <el-drawer> 打开时悬浮球被遮挡，z-index: 9999 失效
• 在 iOS Safari 或 Chrome 移动端触发文字高亮，中断拖拽流程
• 页面存在 transform: scale(0.95) 的布局容器时，position: fixed 悬浮球定位漂移达 120px+

二、机制层：浏览器渲染与事件系统底层归因

根本矛盾源于三重上下文隔离：

隔离类型	触发条件	对悬浮球的影响
CSS 定位上下文	父元素含 transform/perspective/filter	fixed 相对于该父容器定位，非视口
事件捕获/冒泡链	未使用 addEventListener(..., { capture: true })	mouseup 在子组件内触发失败，全局监听丢失
Pointer Events 层级	el-dialog 设置 pointer-events: none 透传但遮罩层未重置	悬浮球被判定为“不可交互”，mousedown 不触发

三、设计层：Vue 3 Composition API 封装原则

1. 零侵入性：不 patch Element Plus 组件，仅通过 CSS 变量与属性控制
2. 坐标解耦：采用 clientX/clientY + getBoundingClientRect() 动态计算，规避 offsetLeft 依赖
3. 生命周期自治：onMounted 绑定，onBeforeUnmount 清理，支持多实例共存
4. 持久化策略：localStorage key 基于组件 ID + 页面路径哈希，防跨页污染

四、实现层：核心代码与防御式逻辑

const useDraggableBall = (props) => {
  const ballRef = ref(null);
  const position = reactive({ x: 0, y: 0 });
  const isDragging = ref(false);
  const dragOffset = reactive({ x: 0, y: 0 });

  const handleMousedown = (e) => {
    if (!ballRef.value) return;
    const rect = ballRef.value.getBoundingClientRect();
    dragOffset.x = e.clientX - rect.left;
    dragOffset.y = e.clientY - rect.top;
    isDragging.value = true;
    document.body.style.userSelect = 'none';
    document.addEventListener('mousemove', handleMousemove, { passive: false });
    document.addEventListener('mouseup', handleMouseup);
  };

  const handleMousemove = (e) => {
    if (!isDragging.value || !ballRef.value) return;
    const maxX = window.innerWidth - ballRef.value.offsetWidth;
    const maxY = window.innerHeight - ballRef.value.offsetHeight;
    position.x = Math.max(0, Math.min(maxX, e.clientX - dragOffset.x));
    position.y = Math.max(0, Math.min(maxY, e.clientY - dragOffset.y));
  };

  const handleMouseup = () => {
    isDragging.value = false;
    document.body.style.userSelect = '';
    document.removeEventListener('mousemove', handleMousemove);
    document.removeEventListener('mouseup', handleMouseup);
    // 持久化坐标（防刷新丢失）
    localStorage.setItem(
      `draggable-ball-${window.location.pathname}-${props.id || 'default'}`,
      JSON.stringify(position)
    );
  };

  // 初始化位置（支持 SSR 友好）
  onMounted(() => {
    const saved = localStorage.getItem(
      `draggable-ball-${window.location.pathname}-${props.id || 'default'}`
    );
    if (saved) Object.assign(position, JSON.parse(saved));
    
    // 关键修复：强制脱离 transform 上下文
    ballRef.value.style.position = 'fixed';
    ballRef.value.style.willChange = 'transform';
  });

  return { ballRef, position, handleMousedown };
};

五、集成层：Element Plus 生态协同方案

graph TD
  A[悬浮球组件] -->|监听原生事件| B[document 全局]
  B --> C{El-Drawer/Dialog 打开？}
  C -->|是| D[动态提升 z-index 至 10000+]
  C -->|否| E[恢复默认 z-index]
  A --> F[CSS 注入：pointer-events: auto !important]
  F --> G[覆盖 El-Button 等禁用态拦截]
  A --> H[viewport meta 标签检测]
  H -->|移动端| I[绑定 touchstart/touchmove/touchend]

六、验证层：边界测试用例清单

• ✅ 在 <el-drawer v-model="drawer" :append-to-body="true"> 内打开时，悬浮球始终位于最上层
• ✅ 页面应用 filter: blur(2px) 后，悬浮球仍精准锚定视口左上角
• ✅ 连续快速开关 5 次 Dialog，无事件监听泄漏（Chrome DevTools → Memory → Event Listeners 验证）
• ✅ iOS Safari 横屏/竖屏切换后，坐标自动适配新 viewport 尺寸
• ✅ 多标签页共用同一域名时，各页悬浮球坐标独立存储互不干扰

七、演进层：面向未来的可扩展接口

预留以下能力插槽，满足企业级场景：

• onDragStart / onDragEnd —— 支持埋点上报与权限校验
• boundaryStrategy: 'viewport' | 'parent' | 'custom' —— 自定义边界回调函数
• storage: { engine: 'localStorage' | 'indexedDB', keyPrefix: string }
• dragSensitivity: number —— 防止误触的最小位移阈值（px）

```