React SVG拖放和onmousemove

import React, { useState } from 'react';

function DraggableCircle() {
  const [position, setPosition] = useState({ x: 50, y: 50 });
  const [dragging, setDragging] = useState(false);
  const [start, setStart] = useState({ x: 0, y: 0 });

  const handleMouseDown = (e) => {
    setDragging(true);
    setStart({
      x: e.clientX - position.x,
      y: e.clientY - position.y
    });
  };

  const handleMouseMove = (e) => {
    if (dragging) {
      setPosition({
        x: e.clientX - start.x,
        y: e.clientY - start.y
      });
    }
  };

  const handleMouseUp = () => {
    setDragging(false);
  };

  return (
    <svg width="100%" height="100%" onMouseMove={handleMouseMove} onMouseUp={handleMouseUp}>
      <circle
        cx={position.x}
        cy={position.y}
        r="20"
        fill="red"
        onMouseDown={handleMouseDown}
      />
    </svg>
  );
}

export default DraggableCircle;

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

function App() {
  return (
    <div style={{ width: '100vw', height: '100vh' }}>
      <DraggableCircle />
    </div>
  );
}

export default App;