Javascript 将z索引应用于唯一子组件不起作用

我试图让鼠标指针检测这个

框A

组件，但它被呈现在

TransformWrapper

组件的“下面”。（在我的项目中，我需要在

TransformWrapper

之前呈现

框A

）

同时，我还需要

框B

始终位于

框A

之上

此外，我无法转换

框A

，这就是为什么我将其置于

TransformWrapper

之外

现在我可以将

框A

的z索引更改为高于

TransformWrapper

，但这也使得

框A

高于

框B

。我尝试更改

框B的z索引，但没有成功

我也不能将
pointerEvents
设置为
none
，因为我需要在所有事件上设置鼠标事件

是否有一个工作环境来实现我想要的行为

import React from "react";
import Draggable from "react-draggable";
import { TransformWrapper, TransformComponent } from "react-zoom-pan-pinch";

const boxStyle = {
  position: "absolute",
  border: "1px #999 solid",
  borderRadius: "10px",
  textAlign: "center"
};

const canvasStyle = {
  width: "60vw",
  height: "60vh",
  border: "1px #999 solid",
  borderRadius: "10px"
};

const Box = (props) => {
  return (
    <div
      className="dragTable"
      style={{
        ...boxStyle,
        left: props.left,
        top: props.top,
        height: 100,
        width: 100,
        backgroundColor: "#fafafa"
      }}
    >
      {" "}
      {props.id}{" "}
    </div>
  );
};

const App = () => {
  const panOptions = { disableOnTarget: ["dragTable"] };
  const transformOptions = {
    limitToBounds: false,
    minScale: 0.25,
    maxScale: 3
  };

  return (
    <div>
      <Draggable>
        {/* uncomment this style for box A to be draggable but on top of box B */}
        <div
        // style={{position: "absolute", zIndex: 1}}
        >
          <Box
            id="box A, supposed to be draggable too"
            left={40}
            top={50}
          ></Box>
        </div>
      </Draggable>

      <TransformWrapper options={transformOptions} pan={panOptions}>
        <TransformComponent>
          <div style={canvasStyle} id="canvas">
            Pan Zoom canvas
            <Draggable>
              {/* this z-index doesn't work if the z-index of box A is enabled */}
              <div style={{ position: "absolute", zIndex: 3 }}>
                <Box id="box B, draggable" left={60} top={80}></Box>
              </div>
            </Draggable>
          </div>
        </TransformComponent>
      </TransformWrapper>
    </div>
  );
};

export default App;


从“React”导入React；
从“react Draggable”导入Draggable；
从“react zoom pan pinch”导入{TransformWrapper，TransformComponent}；
常量框样式={
位置：“绝对”，
边框：“1px#999实心”，
边界半径：“10px”，
textAlign：“居中”
};
常量画布样式={
宽度：“60vw”，
高度：“60vh”，
边框：“1px#999实心”，
边界半径：“10px”
};
常量框=（道具）=>{
返回(
{" "}
{props.id}{”“}
);
};
常量应用=（）=>{
const panOptions={disableOnTarget:[“dragTable”]}；
常量转换选项={
limitToBounds:错误，
最小刻度：0.25，
最大刻度：3
};
返回(
{/*取消注释此样式，使框A可拖动，但位于框B的顶部*/}
平移缩放画布
{/*如果启用了框A的z索引，则此z索引不起作用*/}
);
};
导出默认应用程序；

这是
codesandbox.io
链接。我无法使用StackOverflow代码段，因为我无法导入某些Github库。

这些库是，而且有50%的时间，z-index问题是HTML问题。尝试将两个
draggable
放在同一层次结构中，以获得所需的行为：

return (
    <div>
      <TransformWrapper options={transformOptions} pan={panOptions}>
        <TransformComponent>
          <div style={canvasStyle} id="canvas">
            <Draggable>
              {/* uncomment this style for box A to be draggable but on top of box B */}
              <div
              // style={{position: "absolute", zIndex: 1}}
              >
                <Box
                  id="box A, supposed to be draggable too"
                  left={40}
                  top={50}
                ></Box>
              </div>
            </Draggable>
            Pan Zoom canvas
            <Draggable>
              {/* this z-index doesn't work if the z-index of box A is enabled */}
              <div style={{ position: "absolute", zIndex: 3 }}>
                <Box id="box B, draggable" left={60} top={80}></Box>
              </div>
            </Draggable>
          </div>
        </TransformComponent>
      </TransformWrapper>
    </div>
  );

返回(
{/*取消注释此样式，使框A可拖动，但位于框B的顶部*/}
平移缩放画布
{/*如果启用了框A的z索引，则此z索引不起作用*/}
);

我建议您阅读有关堆栈上下文和z索引如何工作的内容。我知道这对***来说是一种痛苦，但这是唯一的方法，
50%的时候，z-index问题是HTML问题。尝试将两个
draggable
放在同一层次结构中，以获得所需的行为：

return (
    <div>
      <TransformWrapper options={transformOptions} pan={panOptions}>
        <TransformComponent>
          <div style={canvasStyle} id="canvas">
            <Draggable>
              {/* uncomment this style for box A to be draggable but on top of box B */}
              <div
              // style={{position: "absolute", zIndex: 1}}
              >
                <Box
                  id="box A, supposed to be draggable too"
                  left={40}
                  top={50}
                ></Box>
              </div>
            </Draggable>
            Pan Zoom canvas
            <Draggable>
              {/* this z-index doesn't work if the z-index of box A is enabled */}
              <div style={{ position: "absolute", zIndex: 3 }}>
                <Box id="box B, draggable" left={60} top={80}></Box>
              </div>
            </Draggable>
          </div>
        </TransformComponent>
      </TransformWrapper>
    </div>
  );

返回(
{/*取消注释此样式，使框A可拖动，但位于框B的顶部*/}
平移缩放画布
{/*如果启用了框A的z索引，则此z索引不起作用*/}
);

我建议您阅读有关堆栈上下文和z索引如何工作的内容。我知道这对***来说很痛苦，但这是唯一的办法
事实上我忘了在我的问题中提到这一点，我的错。但是我不想转换
框A
。这就是我把它放在外面的原因。我将编辑我的问题。在“我不想”旁边是否有任何有效的理由不更改
框A
？哦，实际上在我的项目中，
框A
是一个不同的组件，当放入
TransformWrapper
中时无法正确呈现。为了简单起见，我在这篇文章中有一个
Box
组件。我道歉实际上我忘了在我的问题中提到这一点，我的错。但是我不想转换
框A
。这就是我把它放在外面的原因。我将编辑我的问题。在“我不想”旁边是否有任何有效的理由不更改
框A
？哦，实际上在我的项目中，
框A
是一个不同的组件，当放入
TransformWrapper
中时无法正确呈现。为了简单起见，我在这篇文章中有一个
Box
组件。对不起