reat-float-menu

import * as React from 'react';
import Box from '@mui/material/Box';
import Fab from '@mui/material/Fab';
import AddIcon from '@mui/icons-material/Add';
import Menu from '@mui/material/Menu';
import MenuItem from '@mui/material/MenuItem';
// import { createTheme } from '@mui/material/styles'
import './floatBtn.css';

export default function FloatingActionButtonSize() {
  const [transform,setTranasform] = React.useState({ top: document.body.offsetHeight - 300, left: document.body.offsetWidth - 50 })
  const [anchorEl, setAnchorEl] = React.useState(null);
  const [moveFlags,setMoveFlags] = React.useState(false);
  let [lastMoveIndex,setLastMoveIndex] = React.useState(0);
  let [curMoveIndex,setCurMoveIndex] = React.useState(0);
  const open = Boolean(anchorEl);
  // const [open,setOpen] = React.useState(false);
  const floatBtn = React.useRef()
  const handleClick = (event) => {
    if(!moveFlags){
      console.log('first',lastMoveIndex,curMoveIndex)
      if(lastMoveIndex === curMoveIndex){
        setAnchorEl(event.currentTarget);
      }else{
        setCurMoveIndex(lastMoveIndex)
      }
    }
    // setOpen(true)
  };
  const handleClose = () => {
    setAnchorEl(null);
  };

  const moveStart = (e) => {
    console.log('moveStart')
    if (e.button === 2) return;
    //计算鼠标相对于元素的位置
    const { top, left } = transform
    const dx = e.clientX - left
    const dy = e.clientY - top

    setMoveFlags(true)
    document.onmousemove = (e) => {
    setLastMoveIndex(lastMoveIndex++)

      console.log('onmousemove')
      const bodyWidth = document.body.clientWidth
      const bodyHeight = document.body.clientHeight
      const moveMaxHeight = bodyHeight - floatBtn.current.offsetHeight +dy
      const moveMaxWidth = bodyWidth - floatBtn.current.offsetWidth + dx
      const nx = e.clientX
      const ny = e.clientY
     const xPum = (nx > moveMaxWidth ? moveMaxWidth : nx) - dx
     const yPum = (ny > moveMaxHeight ? moveMaxHeight : ny) - dy
      console.log('xpum', xPum, yPum)
      setTranasform({ top:yPum > 0 ? yPum : 0, left:xPum > 0 ? xPum : 0})
    }
    document.onmouseup = () => {
      // document.onmousemove = null
      // document.onmouseup = null
      setMoveFlags(false)
      // resetFloatBtnLocation()
      moveEnd()
    }
  }
  const resetFloatBtnLocation = () => { 
    console.log('reset')
    if(!floatBtn.current) return
    const bodyWidth = document.body.clientWidth
    const {top, left} = transform
    console.log('left: ' + left + ' top: ' + top)
    if(left <= bodyWidth / 2){
      console.log('1')
      setTranasform({ top:top, left:0})
    }else{
      console.log('2')
      setTranasform({ top:top, left:bodyWidth - 50})
    }

  }
  const moveEnd = () => {
    console.log('moveEnd')
    document.onmousemove = null
    document.onmouseup = null;
    resetFloatBtnLocation()
    // setMoveFlags(false)
  }

  return (
    <div className='warpBox'>
      <div
        className='floatBtn'
        ref={floatBtn}
        style={{ transition: !moveFlags ? 'all 300ms ease' : 'unset', transform: `translate(${transform.left}px,${transform.top}px)` }}
        onMouseDown={moveStart}
        onMouseUp={moveEnd}

      >
        <Box>
          <Fab size="medium" color="secondary" aria-label="add" onClick={handleClick}>
            <AddIcon />
          </Fab>
          <Menu
            id="demo-positioned-menu"
            aria-labelledby="demo-positioned-button"
            anchorEl={anchorEl}
            open={open}
            onClose={handleClose}
            anchorOrigin={{
              vertical: 'top',
              horizontal: 'left',
            }}
            transformOrigin={{ horizontal: 'right', vertical: 'top' }}
          >
            <MenuItem onClick={handleClose}>Profile</MenuItem>
            <MenuItem onClick={handleClose}>My account</MenuItem>
            <MenuItem onClick={handleClose}>Logout</MenuItem>
          </Menu>
        </Box>
      </div>
    </div>
  );
}

// import * as React from 'react';
// import Box from '@mui/material/Box';
// import SpeedDial from '@mui/material/SpeedDial';
// import SpeedDialIcon from '@mui/material/SpeedDialIcon';
// import SpeedDialAction from '@mui/material/SpeedDialAction';
// import FileCopyIcon from '@mui/icons-material/FileCopyOutlined';
// import SaveIcon from '@mui/icons-material/Save';
// import PrintIcon from '@mui/icons-material/Print';
// import ShareIcon from '@mui/icons-material/Share';

// const actions = [
//   { icon: <FileCopyIcon />, name: 'Copy' },
//   { icon: <SaveIcon />, name: 'Save' },
//   { icon: <PrintIcon />, name: 'Print' },
//   { icon: <ShareIcon />, name: 'Share' },
// ];

// export default function BasicSpeedDial() {
//   return (
//     <Box sx={{ height: 320, transform: 'translateZ(0px)', flexGrow: 1 }}>
//       <SpeedDial
//         ariaLabel="SpeedDial basic example"
//         sx={{ position: 'absolute', bottom: 16, right: 16 }}
//         icon={<SpeedDialIcon />}
//       >
//         {actions.map((action) => (
//           <SpeedDialAction
//             key={action.name}
//             icon={action.icon}
//             tooltipTitle={action.name}
//           />
//         ))}
//       </SpeedDial>
//     </Box>
//   );
// }

.warpBox {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    /* pointer-events: none; */
}
.floatBtn {
    position: absolute;
    z-index: 1000;
    cursor: pointer;
}