react 拖拽组件

在React中实现拖拽功能，可以通过原生的HTML5 Drag and Drop API或者借助第三方库如react-dnd来完成。提供两种思路：一是使用原生API，二是使用react-dnd库，并给出详细代码示例。

思路一：使用HTML5原生Drag And Drop API

我们来看如何使用HTML5原生的Drag And Drop API来实现一个简单的拖拽组件。这个方法不需要额外的依赖库，直接利用浏览器内置的功能。

jsx
import React, { useState } from 'react';</p>

<p>function DraggableItem() {
    const [position, setPosition] = useState({ x: 0, y: 0 });</p>

<pre><code>const handleDragStart = (e) => {
    e.dataTransfer.setData('text/plain', null);
};

const handleDragOver = (e) => {
    e.preventDefault();
};

const handleDrop = (e) => {
    e.preventDefault();
    const rect = e.target.getBoundingClientRect();
    const x = e.clientX - rect.left;
    const y = e.clientY - rect.top;
    setPosition({ x, y });
};

return (
    <div 
        onDrop={handleDrop} 
        onDragOver={handleDragOver} 
        style={{ width: '300px', height: '300px', border: '1px solid black', position: 'relative' }}
    >
        <div 
            draggable 
            onDragStart={handleDragStart} 
            style={{ ...position, width: '50px', height: '50px', background: 'red', position: 'absolute' }}
        />
    </div>
);

}

export default DraggableItem;

在这个例子中，我们创建了一个可以拖动的小方块。

思路二：使用react-dnd库

React-dnd是一个非常流行的用于处理拖放操作的React库。它提供了更简洁的API和更好的性能优化。

需要安装react-dnd和react-dnd-html5-backend：

bash
npm install react-dnd react-dnd-html5-backend


然后我们可以这样使用它：

jsx
import React from 'react';
import { useDrag, useDrop } from 'react-dnd';</p>

<p>const Box = ({ name }) => {
    const [{ isDragging }, drag] = useDrag(() => ({
        type: 'box',
        item: { name },
        collect: monitor => ({
            isDragging: !!monitor.isDragging(),
        }),
    }));</p>

<pre><code>return (
    <div ref={drag} style={{ opacity: isDragging ? 0.5 : 1, cursor: 'move', padding: '1rem', border: '1px solid gray' }}>
        {name}
    </div>
);

};

const Dustbin = () => {
const [, drop] = useDrop(() => ({
accept: 'box',
drop: () => 'Dropped',
}));

return <div ref={drop} style={{ padding: '1rem', border: '1px solid gray', margin: '1rem' }}>Drop here</div>;

};

const App = () => {
return (

);
};

export default App;

在这个例子中，我们创建了一个可以拖动到指定区域的盒子。这两种方法各有优劣，可以根据具体需求选择合适的方法。