React实现类似Windows/Mac文件夹的可拖拽缩放组件问题

本质问题是拖拽和缩放的事件监听范围重叠，导致调整大小时误触发拖拽。核心解决思路是隔离两个功能的触发逻辑，以下是具体实现方案：

1. 区分操作区域（最直接方案） #

将缩放手柄做成独立的DOM元素，仅在该元素上绑定缩放相关事件，拖拽事件则绑定到组件的其他区域。用户点击手柄时只会触发缩放，点击组件主体才会触发拖拽，从根源避免冲突。

基于第三方库的示例（react-draggable + react-resizable） #

import { useState } from 'react';
import Draggable from 'react-draggable';
import Resizable from 'react-resizable';
import 'react-resizable/css/styles.css';

const FolderComponent = () => {
  return (
    <Draggable>
      <Resizable
        width={300}
        height={200}
        // 自定义缩放手柄，限制操作范围
        handle={
          <div className="resize-handle" style={{
            position: 'absolute',
            bottom: 0,
            right: 0,
            width: '16px',
            height: '16px',
            backgroundColor: '#ccc',
            cursor: 'se-resize',
            zIndex: 10
          }} />
        }
      >
        <div style={{
          width: '100%',
          height: '100%',
          border: '1px solid #000',
          backgroundColor: '#f0f0f0',
          padding: '8px',
          cursor: 'move'
        }}>
          文件夹内容
        </div>
      </Resizable>
    </Draggable>
  );
};

2. 事件阻止冒泡/默认行为 #

如果缩放手柄与拖拽区域存在不可避免的重叠，在缩放的mousedown事件中调用e.stopPropagation()，阻止事件传递到拖拽的监听函数，从而屏蔽拖拽触发。

自定义实现的示例 #

import { useState, useRef, useEffect } from 'react';

const CustomFolder = () => {
  const [pos, setPos] = useState({ x: 100, y: 100 });
  const [size, setSize] = useState({ width: 300, height: 200 });
  const startSize = useRef({});
  const startDragOffset = useRef({});
  const isDragging = useRef(false);

  // 缩放手柄的mousedown事件
  const handleResizeStart = (e) => {
    e.stopPropagation(); // 阻止拖拽的mousedown触发
    startSize.current = { ...size };
    const startX = e.clientX;
    const startY = e.clientY;

    const handleMove = (moveE) => {
      const deltaX = moveE.clientX - startX;
      const deltaY = moveE.clientY - startY;
      setSize({
        width: startSize.current.width + deltaX,
        height: startSize.current.height + deltaY
      });
    };

    const handleUp = () => {
      document.removeEventListener('mousemove', handleMove);
      document.removeEventListener('mouseup', handleUp);
    };

    document.addEventListener('mousemove', handleMove);
    document.addEventListener('mouseup', handleUp);
  };

  // 组件主体的拖拽事件
  const handleDragStart = (e) => {
    isDragging.current = true;
    startDragOffset.current = {
      x: e.clientX - pos.x,
      y: e.clientY - pos.y
    };
  };

  useEffect(() => {
    const handleMove = (e) => {
      if (!isDragging.current) return;
      setPos({
        x: e.clientX - startDragOffset.current.x,
        y: e.clientY - startDragOffset.current.y
      });
    };

    const handleUp = () => {
      isDragging.current = false;
    };

    document.addEventListener('mousemove', handleMove);
    document.addEventListener('mouseup', handleUp);

    return () => {
      document.removeEventListener('mousemove', handleMove);
      document.removeEventListener('mouseup', handleUp);
    };
  }, [pos]);

  return (
    <div
      style={{
        position: 'absolute',
        left: pos.x,
        top: pos.y,
        width: size.width,
        height: size.height,
        border: '1px solid #000',
        backgroundColor: '#f0f0f0'
      }}
      onMouseDown={handleDragStart}
    >
      <div style={{ padding: '8px', cursor: 'move' }}>自定义文件夹</div>
      <div
        style={{
          position: 'absolute',
          bottom: 0,
          right: 0,
          width: '16px',
          height: '16px',
          backgroundColor: '#ccc',
          cursor: 'se-resize'
        }}
        onMouseDown={handleResizeStart}
      />
    </div>
  );
};

3. 状态标记控制 #

通过一个状态变量标记当前是否处于缩放状态，在拖拽的触发逻辑中先判断该状态，若正在缩放则跳过拖拽初始化。

const [isResizing, setIsResizing] = useState(false);

// 缩放开始时标记状态
const handleResizeStart = () => setIsResizing(true);
// 缩放结束时重置状态
const handleResizeStop = () => setIsResizing(false);

// 拖拽开始前判断状态
const handleDragStart = (e) => {
  if (isResizing) {
    e.preventDefault();
    e.stopPropagation();
    return;
  }
  // 正常拖拽逻辑
};

内容的提问来源于stack exchange，提问作者M. Ali Damar