如何实现Material UI抽屉的可拖拽调整大小？求推荐最优方案

你的顾虑完全合理——全局持续监听鼠标事件确实有点“大材小用”，还可能带来不必要的性能消耗。我推荐你采用**“按需监听”**的思路：只在用户按下拖拽手柄时才添加鼠标移动和抬起的监听，拖拽结束后立即移除这些监听，既能实现功能，又能避免冗余消耗。

下面是具体的实现步骤和代码示例：

核心思路 #

1. 给拖拽手柄绑定mousedown事件，触发拖拽开始逻辑
2. 拖拽启动时，临时添加全局的mousemove（处理宽度更新）和mouseup（结束拖拽）事件监听
3. 拖拽结束时，立刻移除这两个全局监听，清理资源
4. 用React状态（比如useState）控制抽屉的宽度变化

代码示例（函数组件） #

结合Material UI的Drawer组件，实现可拖拽调整的抽屉：

import { useState, useRef } from 'react';
import { Drawer, Box } from '@mui/material';

const ResizableDrawer = () => {
  const [drawerWidth, setDrawerWidth] = useState(300);
  // 用ref记录拖拽状态、初始位置和宽度，避免状态更新导致的重渲染干扰
  const isDragging = useRef(false);
  const startX = useRef(0);
  const startWidth = useRef(0);

  // 拖拽开始：记录初始值，添加全局监听
  const handleDragStart = (e) => {
    isDragging.current = true;
    startX.current = e.clientX;
    startWidth.current = drawerWidth;
    
    document.addEventListener('mousemove', handleDragMove);
    document.addEventListener('mouseup', handleDragEnd);
    
    // 阻止默认行为，避免文本选中、页面滚动等干扰拖拽
    e.preventDefault();
  };

  // 拖拽过程：计算新宽度并更新状态
  const handleDragMove = (e) => {
    if (!isDragging.current) return;
    
    const deltaX = e.clientX - startX.current;
    // 限制最小宽度，防止抽屉缩到消失，也可根据需求加最大宽度限制
    const newWidth = Math.max(200, startWidth.current + deltaX);
    setDrawerWidth(newWidth);
  };

  // 拖拽结束：移除全局监听，重置拖拽状态
  const handleDragEnd = () => {
    isDragging.current = false;
    document.removeEventListener('mousemove', handleDragMove);
    document.removeEventListener('mouseup', handleDragEnd);
  };

  return (
    <Drawer
      variant="persistent"
      open={true}
      sx={{
        width: drawerWidth,
        flexShrink: 0,
        '& .MuiDrawer-paper': {
          width: drawerWidth,
          position: 'relative', // 让拖拽手柄可以绝对定位
        },
      }}
    >
      {/* 抽屉内容区域 */}
      <Box sx={{ p: 2, height: '100%' }}>
        可拖拽调整宽度的抽屉示例
      </Box>
      
      {/* 拖拽手柄：放在抽屉右侧，提示可交互 */}
      <Box
        sx={{
          position: 'absolute',
          top: 0,
          right: 0,
          width: '8px',
          height: '100%',
          cursor: 'ew-resize',
          backgroundColor: 'rgba(0,0,0,0.1)',
          '&:hover': {
            backgroundColor: 'rgba(0,0,0,0.2)',
          },
        }}
        onMouseDown={handleDragStart}
      />
    </Drawer>
  );
};

export default ResizableDrawer;

额外优化建议 #

• 边界控制：示例里用Math.max(200, ...)限制了最小宽度，你也可以添加Math.min(800, ...)来限制最大宽度，避免抽屉过宽影响布局
• 移动端适配：如果需要支持触摸设备，可以补充touchstart、touchmove、touchend事件的处理逻辑，和鼠标事件逻辑基本一致
• 性能优化：用useCallback包裹事件处理函数，避免组件重渲染时创建新的函数实例
• 交互反馈：可以给拖拽手柄添加hover动画，或者拖拽时改变手柄样式，让用户更清晰地感知拖拽状态

这种按需监听的方式，只有在用户真正进行拖拽操作时才会启用全局事件监听，结束后立刻清理，完美解决了全局持续监听的冗余问题，同时保证了拖拽体验的流畅性。

内容的提问来源于stack exchange，提问作者nauti