MouseMove не работает в реакции Drag'N'Drop

Question

У меня есть 4 блока выше элемента d'n'd. Когда я делаю событие «mousedown» для любого из этих блоков, отключая перетаскивание, я хочу сделать событие «mousemove» для создания соединительной линии из этого элемента и т. Д.

Я уже читал аналогичный выпуск . Но, к сожалению, я не понимаю, как пропустить событие «mousemove» над элементом d'n'd.

Также я знаю, что событие перетаскивания по умолчанию запрещает «движение мыши».

Кто знает, как это работает?

Буду рад любой информации.

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);
}

введите описание изображения здесь