react+typescript实现可以在页面随意拖拽的按钮

Question

请问怎样实现类似Ant design pro开发模式下，右下角那个可以在页面随意拖拽移动的圆球呢，并且鼠标移动上去后出现可以出现tooltip?有没有什么比较好的思路以及注意点呢？

Answer 1

安装依赖
npm install react-draggable

Demo:

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}>
        <button>
          按钮
        </div>
      </Draggable>
    );
  }
}

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