React SVG拖放和onmousemove

在React中实现SVG元素的拖放功能，你可以使用onMouseDown, onMouseMove, 和 onMouseUp 事件来控制。这种方法不仅适用于SVG元素，也适用于其他HTML元素。下面我将通过一个简单的例子来展示如何在React中实现一个可拖动的SVG圆形。

步骤 1: 创建React组件

首先，创建一个React组件，其中包含一个SVG元素和一个圆形。我们将使用组件的状态来跟踪圆形的位置。

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;

说明

初始化状态：
- position 用于存储圆形的当前位置。
- dragging 用于标识是否正在拖动。
- start 用于存储拖动开始时鼠标与圆心的相对位置。
鼠标事件处理：
- handleMouseDown 在鼠标按下时触发，设置拖动状态为true并记录起始位置。
- handleMouseMove 在鼠标移动时触发，如果处于拖动状态，则更新圆形的位置。
- handleMouseUp 在鼠标释放时触发，结束拖动状态。
SVG和圆形元素：
- SVG元素设置了onMouseMove和onMouseUp事件处理器，这样无论鼠标是否在圆形上，只要在SVG范围内移动或释放鼠标，都能正确处理。
- 圆形元素绑定了onMouseDown事件。

使用组件

将此组件放入你的应用程序中的任何地方，例如在App.js中：

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

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

export default App;