React.js中实现点击/拖拽可拖动Div前置及按钮始终置顶

核心思路 #

把全局最高层级（z-index）的状态统一放在父组件App中管理，所有可拖动盒子的层级由父组件分配，避免每个子组件各自维护层级导致的混乱；同时通过CSS固定按钮的层级为最大值，确保它始终在最上层。

修改后的代码 #

1. App.js（父组件） #

import React, { useState } from 'react';
import MyComponent from './MyComponent';

function App() {
  // 存储所有组件的层级数据，key为组件id，value为对应的z-index
  const [componentZIndices, setComponentZIndices] = useState({});
  // 全局最高z-index，初始为0
  const [maxZIndex, setMaxZIndex] = useState(0);
  // 组件计数器，用于生成唯一key
  const [componentCount, setComponentCount] = useState(0);

  // 添加新组件时，给新组件分配当前最高层级+1，并更新全局最高值
  function addNewComponent() {
    const newId = componentCount;
    const newZIndex = maxZIndex + 1;
    setComponentZIndices({...componentZIndices, [newId]: newZIndex});
    setMaxZIndex(newZIndex);
    setComponentCount(componentCount + 1);
  }

  // 当组件被点击/拖动时，将其层级设为当前最高+1，并更新全局最高值
  function bringToFront(id) {
    const newZIndex = maxZIndex + 1;
    setComponentZIndices({
      ...componentZIndices,
      [id]: newZIndex
    });
    setMaxZIndex(newZIndex);
  }

  return (
    <div style={{position: 'relative', minHeight: '100vh'}}>
      {/* 新增按钮：固定位置+极高z-index确保置顶 */}
      <button 
        onClick={addNewComponent}
        style={{
          position: 'fixed',
          top: '20px',
          left: '20px',
          zIndex: 9999,
          padding: '8px 16px',
          cursor: 'pointer'
        }}
      >
        新增可拖动盒子
      </button>
      {/* 渲染所有可拖动组件，传递id、z-index和前置回调 */}
      {Object.keys(componentZIndices).map(id => (
        <MyComponent 
          key={id}
          id={parseInt(id)}
          zIndex={componentZIndices[id]}
          bringToFront={() => bringToFront(id)}
        />
      ))}
    </div>
  );
}

export default App;

2. MyComponent.js（子组件） #

import React from 'react';
import Draggable from 'react-draggable';

function MyComponent({ id, zIndex, bringToFront }) {
  return (
    <Draggable 
      onMouseDown={bringToFront}
      onDragStart={bringToFront} // 拖动开始时也触发前置
    >
      <div 
        className="mydiv"
        style={{
          zIndex: zIndex,
          position: 'absolute',
          width: '150px',
          height: '150px',
          backgroundColor: `hsl(${id * 30}, 70%, 60%)`, // 不同组件用不同颜色区分
          cursor: 'move',
          border: '2px solid #333'
        }}
      ></div>
    </Draggable>
  );
}

export default MyComponent;

关键说明 #

• 全局层级管理：父组件App维护maxZIndex和componentZIndices，所有子组件的层级由父组件统一分配。当某个组件需要前置时，直接将其层级设为maxZIndex + 1，同时更新maxZIndex，确保每次前置都是当前最高层级。
• 按钮置顶：通过position: fixed固定按钮位置，设置zIndex: 9999（远大于子组件可能用到的层级），确保按钮不会被任何可拖动盒子覆盖。
• 拖动/点击触发前置：在Draggable组件上绑定onMouseDown和onDragStart事件，确保无论是点击还是开始拖动，都会触发前置逻辑。

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