问答

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

作者:admin 2021-05-07 我要评论

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

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)

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

###

安装依赖
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);

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • react+typescript实现可以在页面随意拖

    react+typescript实现可以在页面随意拖

  • hadoop2.10执行自带的测试程序不输出ou

    hadoop2.10执行自带的测试程序不输出ou

  • vs code上的git管理总是想删我文件?

    vs code上的git管理总是想删我文件?

  • 抓包软件 google chrome 总是自动代理

    抓包软件 google chrome 总是自动代理

腾讯云代理商
海外云服务器