Make a SVG shape draggable

Question

I am working with React.js recently and when I draw a series of SVG shapes, I want to make them draggable and get the positions after dragging. How to do that? (Functions should also be passed in props )

My SVG:

class SVGRender extends React.Component {
    render() {
        return (
            <svg>
                {this.props.circle_list.map(node => (
                    <circle cx={node.x} cy={node.y} r="20" fill="white" 
                        stroke="black" strokeWidth="2"
                    >
                    </circle>
                ))}
            </svg>
        )
    }
}

/*
this.props.circle_list=[{
    x: ... ,
    y: ... ,
},...]
*/

Answer 1

Take a look at the react-draggable component. There is a demo page here showing what it can do.

It's basically a react component that wraps other elements making them draggable. It adds this draggability transparently to its children:

<Draggable>
   <div>I can now be moved around!</div>
</Draggable>

Here is some example code from the npm page:

import React from 'react';
import ReactDOM from 'react-dom';
import Draggable from 'react-draggable';

class App extends React.Component {

  eventLogger = (e: MouseEvent, data: Object) => {
    console.log('Event: ', e);
    console.log('Data: ', data);
  };

  render() {
    return (
      <Draggable
        axis="x"
        handle=".handle"
        defaultPosition={{x: 0, y: 0}}
        position={null}
        grid={[25, 25]}
        scale={1}
        onStart={this.handleStart}
        onDrag={this.handleDrag}
        onStop={this.handleStop}>
        <div>
          <div className="handle">Drag from here</div>
          <div>This readme is really dragging on...</div>
        </div>
      </Draggable>
    );
  }
}

ReactDOM.render(<App/>, document.body);