拖动SVG矩形

Question

当我尝试像下面这样拖动一个SVG矩形时，它首先会选择页面上的任何文本，然后才能成为可拖动的。我该如何使它最初就可拖动？

<g
      onDragStart={this.onDragStart}
      onDrag={this.onDrag}
      onDragEnd={this.onDragEnd}>
   <rect></rect>
   <text>{text}</text>
</g>

我正在使用React，这是我的组件的一些功能：

  onDragStart = (event) => {
    this.setState({
      dx: event.clientX - this.state.x,
      dy: event.clientY - this.state.y
    });
  };

  onDrag = (event) => {
    this.setState({
      x: event.clientX - this.state.dx,
      y: event.clientY - this.state.dy
    });
  };

  onDragEnd = (event) => {
    this.setState({
      x: event.clientX - this.state.dx,
      y: event.clientY - this.state.dy
    });
  };

- svnvav

---

听起来你只是在谈论这个：这里？ - Chris W.

@Chris W. 在添加.noselect类之后，实际上它并不会选择矩形内的文本，但它仍然看起来像是一个选择（鼠标指针），并且在我还没有从SVG中选择任何内容之前，它仍然是无法拖动的。 - svnvav

所以，我发现问题不是文本标签。它发生在我使用矩形时。值得注意的是，使用圆形时它可以正常工作。 - svnvav

请提供一个 [MCVE]。 - Paul LeBeau

Answer 1

事实证明，我应该在组件状态中添加一个布尔属性“active”，并使用onMouseDown、onMouseMove、onMouseOut和onMouseUp事件。现在它可以正常工作了。

<g
  onMouseDown={this.onDragStart}
  onMouseMove={this.onDrag}
  onMouseOut={this.onDrag}
  onMouseUp={this.onDragEnd}>
   <rect></rect>
   <text>{text}</text>
</g>

  onDragStart = (event) => {
    this.setState({
      active: true,
      dx: event.clientX - this.state.x,
      dy: event.clientY - this.state.y
    });
  };

  onDrag = (event) => {
    if(this.state.active)
      this.setState({
        x: event.clientX - this.state.dx,
        y: event.clientY - this.state.dy
      });
  };

  onDragEnd = (event) => {
    this.setState({
      active: false,
      x: event.clientX - this.state.dx,
      y: event.clientY - this.state.dy
    });
  };

- svnvav