大屏拖拽功能，配合ai组件使用，配合各个组件都可使用

onAIMouseDown 函数文档

概述

一个用于处理 AI 组件拖拽功能的鼠标按下事件处理函数。实现了 AI 聊天组件的拖拽功能，允许用户通过鼠标拖拽来移动 AI 组件在屏幕上的位置。只需要在组件上添加方法即可

函数签名

javascript 复制代码

onAIMouseDown(e)

参数

参数	类型	描述
`e`	MouseEvent	鼠标按下事件对象，包含鼠标位置信息

功能描述

该函数的主要功能包括：

初始化拖拽状态 ：设置 isAIDragging 为 true，标记开始拖拽
计算拖拽偏移量：计算鼠标点击位置与 AI 组件当前位置的偏移量
绑定全局事件 ：为文档添加 mousemove 和 mouseup 事件监听器

实现细节

代码实现

javascript 复制代码

onAIMouseDown(e) {
    this.isAIDragging = true;
    this.aiDragOffset = {
        x: e.clientX - this.aiComponentPosition.left,
        y: e.clientY - this.aiComponentPosition.top
    };
    document.addEventListener('mousemove', this.onAIMouseMove);
    document.addEventListener('mouseup', this.onAIMouseUp);
}

数据属性

isAIDragging (Boolean): 标记是否正在拖拽 AI 组件
aiDragOffset (Object): 存储拖拽偏移量
- x (Number): 水平方向偏移量
- y (Number): 垂直方向偏移量
aiComponentPosition (Object): AI 组件的当前位置
- left (Number): 水平位置
- top (Number): 垂直位置

相关函数

onAIMouseMove

处理鼠标移动事件，实时更新 AI 组件位置：

javascript 复制代码

onAIMouseMove(e) {
    if (!this.isAIDragging) return;
    let newLeft = e.clientX - this.aiDragOffset.x;
    let newTop = e.clientY - this.aiDragOffset.y;
    const winW = window.innerWidth, winH = window.innerHeight;
    const width = 350, height = 400; // ai组件宽高
    newLeft = Math.max(0, Math.min(newLeft, winW - width));
    newTop = Math.max(0, Math.min(newTop, winH - height));
    this.aiComponentPosition = { left: newLeft, top: newTop };
}

onAIMouseUp

处理鼠标释放事件，结束拖拽状态：

javascript 复制代码

onAIMouseUp() {
    this.isAIDragging = false;
    document.removeEventListener('mousemove', this.onAIMouseMove);
    document.removeEventListener('mouseup', this.onAIMouseUp);
}

使用场景

该函数在以下场景中被调用：

AI 组件拖拽：当用户点击 AI 组件的拖拽区域时触发
位置调整：允许用户将 AI 组件移动到屏幕上的任意位置
用户体验优化：提供灵活的界面布局调整功能

边界处理

窗口边界限制 ：在 onAIMouseMove 中实现边界检测，防止 AI 组件被拖拽到屏幕外
组件尺寸考虑：考虑 AI 组件的实际尺寸（350px × 400px）进行边界计算
事件清理：在拖拽结束时自动移除全局事件监听器，避免内存泄漏

样式相关

拖拽区域通过 CSS 类 ai-drag-header 定义：

css 复制代码

.ai-drag-header {
  height: 48px; 
  cursor: move; 
  position: absolute; 
  left: 0; 
  right: 60px; 
  top: 0; 
  z-index: 10;
}

注意事项

事件绑定 ：函数会绑定全局的 mousemove 和 mouseup 事件
内存管理 ：确保在 onAIMouseUp 中正确移除事件监听器
边界检查：拖拽过程中会进行边界检查，确保组件不会超出屏幕范围
性能考虑：拖拽过程中会频繁更新组件位置，需要注意性能影响

依赖关系

依赖 onAIMouseMove 函数处理拖拽过程中的位置更新
依赖 onAIMouseUp 函数处理拖拽结束
依赖 aiComponentPosition 数据属性存储组件位置
依赖 isAIDragging 和 aiDragOffset 数据属性管理拖拽状态