CODEWITHSUNDEEP
javascripthtmlsvg
svnvav
svnvav

Reputation: 337

drag an svg rect

When I try to drag an svg rect like below it first selects any text on my page and then become draggable. How I can make it draggable initially?

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

I'm using React and here are a functions of my component:

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

Upvotes: 3

Views: 2613

Answers (1)

svnvav
svnvav

Reputation: 337

It turned out, I should use onMouseDown, onMouseMove, onMouseOut and onMouseUp events adding a bool property 'active' in the component state. Now it works.

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

Upvotes: 1

Related Questions