reactjs - React-Rnd 一个 block 在另一个里面

Question

我正在使用 react-rnd 库来拖动和调整 block 的大小。我创建了一个页面。它在其上创建了一个灰色容器，我点击“添加全局容器”按钮，一个容器出现在我可以在父灰色容器中移动和调整大小的字段上

在已创建容器的左上角有一个紫色按钮，点击它，将在该容器内创建另一个容器，现在第一个容器将成为新创建容器的父容器。

问题是我可以调整内部容器的大小，但我不能移动它，或者更确切地说，它会随着父组件移动。仅当父组件接触到其父组件(灰色容器)的边界时，内部组件才会移动到外部组件内部

在代码中它看起来像这样我有一个组件，它本身包含一个组件Box 组件在 Rdn 内部调用——这是您在屏幕上看到的 block ，Rdn 使它移动

type Props = {
  width: string;
  height: string;
  color: string;
};

class BoxWrapper extends React.Component<Props> {
  state = {
    width: "100",
    height: "40",
    x: 0,
    y: 0,
  };

  render() {
    const { width, height, color } = this.props;
    return (
      <Rnd
        size={{ width: this.state.width, height: this.state.height }}
        position={{ x: this.state.x, y: this.state.y }}
        bounds="parent"
        onDragStop={(e: any, d: any) => {
          e.stopPropagation();
          this.setState({ x: d.x, y: d.y });
        }}
        minHeight={16}
        minWidth={16}
        onResize={(
          e: any,
          direction: any,
          ref: any,
          delta: any,
          position: any
        ) => {
          this.setState({
            width: ref.style.width,
            height: ref.style.height,
            ...position,
          });
        }}
      >
        <Box
          x={this.state.x}
          y={this.state.y}
          width={this.state.width}
          height={this.state.height}
          externalHeight={height}
          externalWidth={width}
          color={color}
        />
      </Rnd>
    );
  }
}

export default BoxWrapper;

在Box组件里面，紫色的按钮是勾选的，如果按下了，就需要创建BoxWrapper组件

type BoxProps = {
  x: number;
  y: number;
  width: string;
  height: string;
  externalWidth: string;
  externalHeight: string;
  color: string;
};

class Box extends React.Component<BoxProps> {
  state = {
    isClick: false,
    isCreate: false,
  };
  render() {
    const {
      x,
      y,
      width,
      height,
      externalWidth,
      externalHeight,
      color,
    } = this.props;

    const externalH = parseInt(externalHeight);
    const externalW = parseInt(externalWidth);
    const boxWidth = parseInt(width);
    const boxHeight = parseInt(height);
    const xUpperLeft = x;
    const yUpperLeft = y;
    const xUpperRight = x + boxWidth;
    const yUpperRight = y;
    const xDownLeft = x;
    const yDownLeft = y + boxHeight;
    const xDownRight = x + boxWidth;
    const yDownRight = y + boxHeight;

    return (
      <>
        <div
          style={{
            margin: 0,
            height: "100%",
            padding: 0,
            backgroundColor: color,
          }}
        >
          <div className="wrapper">
            <button
              style={{
                width: 0,
                height: "14px",
                borderRadius: "1px",
                backgroundColor: "#fff",
                display: "flex",
                justifyContent: "center",
                fontSize: 9,
              }}
              onClick={() => this.setState({ isClick: !this.state.isClick })}
            >
              ?
            </button>
            <button
              style={{
                width: 0,
                height: "14px",
                borderRadius: "1px",
                backgroundColor: "#a079ed",
                display: "flex",
                justifyContent: "center",
                fontSize: 9,
              }}
              onClick={() => this.setState({ isCreate: !this.state.isCreate })}
            />
          </div>
          {this.state.isCreate && (
            <BoxWrapper
              width={width}
              height={height}
              color="#42d5bc"
            />
          )}
        </div>
        {this.state.isClick && (
          <Tooltip
            leftDistance={xUpperLeft}
            topDistance={yUpperLeft}
            rightDistance={externalW - xUpperRight}
            bottomDistanse={externalH - yDownLeft}
          />
        )}
      </>
    );
  }
}

怎样才能做到不自动拖动父容器就可以自由移动内层容器我尝试在Rnd中的onDragStop方法中指定event.stopPropafgation()，但是根本不起作用，我不知道该做什么

this is a working example of my problem the inner Rnd container has the bounds of the bounds = "parent" and the outer one is "window"

Answer 1

问题解决了您需要将 onDragStop 方法替换为 onDrag 并指定event.stopImmediatePropagation(); working example with corrections of the previous