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