react如何实现列表拖拽排序
实现列表拖拽排序的方法
在React中实现列表拖拽排序可以通过第三方库或原生HTML5的拖拽API完成。以下是两种常见方法的详细说明：
使用react-beautiful-dnd库
react-beautiful-dnd是专为React设计的拖拽排序库，提供完整的拖拽交互体验。
安装依赖：
npm install react-beautiful-dnd基础实现代码：
import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
function App() {
const [items, setItems] = useState([
{ id: '1', content: 'Item 1' },
{ id: '2', content: 'Item 2' },
{ id: '3', content: 'Item 3' }
]);
const onDragEnd = (result) => {
if (!result.destination) return;
const newItems = Array.from(items);
const [removed] = newItems.splice(result.source.index, 1);
newItems.splice(result.destination.index, 0, removed);
setItems(newItems);
};
return (
<DragDropContext onDragEnd={onDragEnd}>
<Droppable droppableId="droppable">
{(provided) => (
<div {...provided.droppableProps} ref={provided.innerRef}>
{items.map((item, index) => (
<Draggable key={item.id} draggableId={item.id} index={index}>
{(provided) => (
<div
ref={provided.innerRef}
{...provided.draggableProps}
{...provided.dragHandleProps}
>
{item.content}
</div>
)}
</Draggable>
))}
{provided.placeholder}
</div>
)}
</Droppable>
</DragDropContext>
);
}使用原生HTML5拖拽API
对于不需要复杂交互的场景，可以使用HTML5原生拖拽功能：
function App() {
const [items, setItems] = useState(['Item 1', 'Item 2', 'Item 3']);
const handleDragStart = (e, index) => {
e.dataTransfer.setData('text/plain', index);
};
const handleDrop = (e, newIndex) => {
e.preventDefault();
const oldIndex = e.dataTransfer.getData('text/plain');
const newItems = [...items];
const [removed] = newItems.splice(oldIndex, 1);
newItems.splice(newIndex, 0, removed);
setItems(newItems);
};
const handleDragOver = (e) => {
e.preventDefault();
};
return (
<div>
{items.map((item, index) => (
<div
key={index}
draggable
onDragStart={(e) => handleDragStart(e, index)}
onDrop={(e) => handleDrop(e, index)}
onDragOver={handleDragOver}
>
{item}
</div>
))}
</div>
);
}选择方案的建议
react-beautiful-dnd提供更完善的拖拽体验（如动画效果、占位符等），适合复杂场景。原生API实现更轻量但功能有限，适合简单需求。对于移动端优先的项目，可以考虑使用react-dnd-touch-backend作为react-beautiful-dnd的后端支持。
