在原生react中拖动形状并调整其大小

import React, { useState } from 'react';

const DraggableShape = () => {
  const [position, setPosition] = useState({ x: 0, y: 0 });
  const [size, setSize] = useState({ width: 100, height: 100 });

  const handleDragStart = (event) => {
    // 记录鼠标按下时的初始位置
    const startX = event.clientX;
    const startY = event.clientY;

    const handleDragMove = (event) => {
      // 计算鼠标移动的距离
      const deltaX = event.clientX - startX;
      const deltaY = event.clientY - startY;

      // 更新形状的位置
      setPosition((prevPosition) => ({
        x: prevPosition.x + deltaX,
        y: prevPosition.y + deltaY,
      }));

      // 更新鼠标按下时的初始位置
      startX = event.clientX;
      startY = event.clientY;
    };

    const handleDragEnd = () => {
      // 移除事件监听器
      document.removeEventListener('mousemove', handleDragMove);
      document.removeEventListener('mouseup', handleDragEnd);
    };

    // 添加事件监听器
    document.addEventListener('mousemove', handleDragMove);
    document.addEventListener('mouseup', handleDragEnd);
  };

  const handleResizeStart = (event) => {
    // 记录鼠标按下时的初始位置和形状的初始大小
    const startX = event.clientX;
    const startY = event.clientY;
    const initialSize = { ...size };

    const handleResizeMove = (event) => {
      // 计算鼠标移动的距离
      const deltaX = event.clientX - startX;
      const deltaY = event.clientY - startY;

      // 更新形状的大小
      setSize((prevSize) => ({
        width: prevSize.width + deltaX,
        height: prevSize.height + deltaY,
      }));

      // 更新鼠标按下时的初始位置
      startX = event.clientX;
      startY = event.clientY;
    };

    const handleResizeEnd = () => {
      // 移除事件监听器
      document.removeEventListener('mousemove', handleResizeMove);
      document.removeEventListener('mouseup', handleResizeEnd);
    };

    // 添加事件监听器
    document.addEventListener('mousemove', handleResizeMove);
    document.addEventListener('mouseup', handleResizeEnd);
  };

  return (
    <div
      style={{
        position: 'absolute',
        left: position.x,
        top: position.y,
        width: size.width,
        height: size.height,
        border: '1px solid black',
        backgroundColor: 'lightblue',
        cursor: 'move',
      }}
      onMouseDown={handleDragStart}
    >
      <div
        style={{
          width: '10px',
          height: '10px',
          backgroundColor: 'black',
          position: 'absolute',
          bottom: 0,
          right: 0,
          cursor: 'nwse-resize',
        }}
        onMouseDown={handleResizeStart}
      />
    </div>
  );
};

export default DraggableShape;

import React from 'react';
import DraggableShape from './DraggableShape';

const App = () => {
  return (
    <div style={{ position: 'relative', height: '500px' }}>
      <DraggableShape />
    </div>
  );
};

export default App;