MouseMove在React Drag'N'Drop中不起作用

时间:2019-03-22 13:59:08

标签: reactjs drag-and-drop react-dnd

我在d'n'd元素上方有4个街区。当我对关闭拖动的任何此块执行“ mousedown”事件时,我想执行一些“ mousemove”事件以从此元素等中建立连接线。

我已经读过类似的issue。但不幸的是,我不明白如何让d'n'd元素上方的“ mousemove”事件通过。

我也知道拖动事件默认情况下禁止“ mousemove”。

谁知道它如何工作?

我将很高兴收到任何信息。

constructor(props: ElementProps & DiagramInjectStore) {
    super(props);

    this.handleFlowCursorSnapping = this.handleFlowCursorSnapping.bind(this) as (event: MouseEvent) => void;
    this.handleFlowCursorFinalSnapping = this.handleFlowCursorFinalSnapping.bind(this) as (event: MouseEvent) => void;
}

public render(): JSX.Element {
    const { coord, size } = this.element.properties;
    const { diagramId } = this.props;
    const { connectors } = this.element;

    return (
        <Select
            coord={ coord }
            size={ size }
            stage={ this.selectStage }
            canResizing={ false }

            onDragStart={ () => this.handleDragStart() }
            onDrag={ e => this.handleDrag(e) }
            onDragEnd={ e => this.handleDragEnd(e) }
        >
            <StyledGlyphElement>
                <Connectors
                    diagramId={ diagramId }
                    type={ ConnectorTypeKind.Element }
                    connectors={ connectors }
                    onMouseDown={ event => this.handleCreateFlow(event) }
                    onMouseOver={ event => this.handleBlur(event) }
                />
            </StyledGlyphElement>
        </Select>
    );
}

public componentDidMount(): void {
    document.body.addEventListener('mousemove', this.handleFlowCursorSnapping, false);
    document.body.addEventListener('mouseup', this.handleFlowCursorFinalSnapping, false);
}

public componentWillUnmount(): void {
    document.body.removeEventListener('mousemove', this.handleFlowCursorSnapping, false);
    document.body.removeEventListener('mouseup', this.handleFlowCursorFinalSnapping, false);
}

private handleFlowCursorSnapping(event: MouseEvent): void {
    document.body.addEventListener('mousemove', this.handleFlowCursorFinalSnapping, false);
}

private handleFlowCursorFinalSnapping(event: MouseEvent): void {
    document.body.removeEventListener('mousemove', this.handleFlowCursorSnapping, false);
}

enter image description here

0 个答案:

没有答案