React实现一个简易可拖曳的Div组件

代码使用函数组件编写

实现思路为点击div时，记录点击事件中鼠标相对于浏览器窗口可视区域的X，Y坐标，未松开鼠标移动时同样记录X，Y坐标，并计算出此次移动的距离与上次距离的差距，得出结果赋值到top属性和left属性上，达到预期效果前提是position为absolute。

import React, { useRef } from "react";

const Drag = (props) => {
  let isMoving = false;
  let position = [0, 0];
  const movingDiv = useRef();
  
  const styles = {
    border: `1px red solid`,
    width: `100px`,
    height: `100px`,
    position: `absolute`,
    top: `0px`,
    left: `0px`
  };

  const onMouseDown = (event) => {
    isMoving = true;
    position = [event.clientX, event.clientY];
  };

  const onMouseUp = () => {
    isMoving = false;
  };

  const onMouseMove = (event) => {
    if (!isMoving) return;
    const div = movingDiv.current;
    const deltaX = event.clientX - position[0];
    const deltaY = event.clientY - position[1];
    const top = parseInt(div.style.top, 0) || 0;
    const left = parseInt(div.style.left, 0) || 0;
    div.style.top = top + deltaY + "px";
    div.style.left = left + deltaX + "px";
    position = [event.clientX, event.clientY];
  };

  return (
    <div
      onMouseDown={onMouseDown}
      onMouseMove={onMouseMove}
      onMouseUp={onMouseUp}
      onClick={props.onClick}
      ref={movingDiv}
      style={{ ...styles, ...props.style }}  //样式可自定义并覆盖
    ></div>
  );
};

export default Drag;

在其他组件中引入Drag组件，实现效果如下

import Drag from './Drag'

//...组件代码省略
return (<Drag/>)