React 组件区域交互：自定义大小、位置、拖拽、重叠和层级

在 React 组件开发中，经常需要实现自定义区域交互，例如修改大小、位置、拖拽、重叠和设置层级等功能。以下是一些常用的方法：

1. 修改div大小

可以使用 CSS 样式来设置 div 的宽度和高度，或者使用 JavaScript 来动态修改 div 的大小。

// 使用 CSS 样式设置 div 的大小
<div style={{ width: '200px', height: '100px' }}></div>

// 使用 JavaScript 动态修改 div 的大小
const [width, setWidth] = useState('200px');
const [height, setHeight] = useState('100px');

return (
  <div style={{ width: width, height: height }}></div>
);

2. 修改div位置

可以使用 CSS 样式来设置 div 的位置，如 position、left、top 等属性，或者使用 JavaScript 来动态修改 div 的位置。

// 使用 CSS 样式设置 div 的位置
<div style={{ position: 'absolute', left: '10px', top: '20px' }}></div>

// 使用 JavaScript 动态修改 div 的位置
const [left, setLeft] = useState('10px');
const [top, setTop] = useState('20px');

return (
  <div style={{ position: 'absolute', left: left, top: top }}></div>
);

3. 拖拽

可以使用 JavaScript 来实现拖拽功能，通过监听鼠标事件来实现拖拽效果。

const [position, setPosition] = useState({ x: 0, y: 0 });

const handleMouseDown = (e) => {
  // 记录鼠标按下时的位置
  const startX = e.clientX;
  const startY = e.clientY;

  // 监听鼠标移动事件
  const handleMouseMove = (e) => {
    // 计算鼠标移动的距离
    const deltaX = e.clientX - startX;
    const deltaY = e.clientY - startY;

    // 更新 div 的位置
    setPosition({ x: position.x + deltaX, y: position.y + deltaY });
  };

  // 监听鼠标抬起事件
  const handleMouseUp = () => {
    // 移除鼠标移动和抬起事件监听器
    window.removeEventListener('mousemove', handleMouseMove);
    window.removeEventListener('mouseup', handleMouseUp);
  };

  // 添加鼠标移动和抬起事件监听器
  window.addEventListener('mousemove', handleMouseMove);
  window.addEventListener('mouseup', handleMouseUp);
};

return (
  <div style={{ position: 'absolute', left: position.x, top: position.y }} onMouseDown={handleMouseDown}></div>
);

4. 重叠

可以使用 JavaScript 来判断两个 div 是否重叠，如果重叠则可以调整它们的位置或大小。

const isOverlap = (div1, div2) => {
  // 获取两个 div 的位置信息
  const rect1 = div1.getBoundingClientRect();
  const rect2 = div2.getBoundingClientRect();

  // 判断是否重叠
  return (
    rect1.left < rect2.right &&
    rect1.right > rect2.left &&
    rect1.top < rect2.bottom &&
    rect1.bottom > rect2.top
  );
};

5. 设置层级

可以使用 CSS 样式来设置 div 的 z-index 属性，也可以使用 JavaScript 来动态修改 div 的 z-index 值，以控制它们的层级关系。

// 使用 CSS 样式设置 div 的层级
<div style={{ position: 'absolute', zIndex: 10 }}></div>

// 使用 JavaScript 动态修改 div 的层级
const [zIndex, setZIndex] = useState(10);

return (
  <div style={{ position: 'absolute', zIndex: zIndex }}></div>
);

通过以上方法，可以实现 React 组件区域的自定义交互功能，为用户提供更加灵活和便捷的操作体验。