react怎么实现拖拽排序

实现拖拽排序的基本思路

在React中实现拖拽排序通常需要借助第三方库，如react-dnd或react-beautiful-dnd。核心逻辑是通过监听拖拽事件，动态更新数据顺序，并触发重新渲染。

使用react-dnd实现

安装依赖库：

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

创建可拖拽的列表项组件：

import { useDrag, useDrop } from 'react-dnd';

const Item = ({ id, text, index, moveItem }) => {
  const [{ isDragging }, drag] = useDrag({
    type: 'ITEM',
    item: { id, index },
    collect: (monitor) => ({
      isDragging: monitor.isDragging(),
    }),
  });

  const [, drop] = useDrop({
    accept: 'ITEM',
    hover: (draggedItem) => {
      if (draggedItem.index !== index) {
        moveItem(draggedItem.index, index);
        draggedItem.index = index;
      }
    },
  });

  return (
    <div
      ref={(node) => drag(drop(node))}
      style={{
        opacity: isDragging ? 0.5 : 1,
        padding: '8px',
        margin: '4px',
        border: '1px solid #ccc',
      }}
    >
      {text}
    </div>
  );
};

创建列表容器组件：

import { DndProvider } from 'react-dnd';
import { HTML5Backend } from 'react-dnd-html5-backend';

const List = () => {
  const [items, setItems] = useState([
    { id: 1, text: 'Item 1' },
    { id: 2, text: 'Item 2' },
    { id: 3, text: 'Item 3' },
  ]);

  const moveItem = (fromIndex, toIndex) => {
    const newItems = [...items];
    const [movedItem] = newItems.splice(fromIndex, 1);
    newItems.splice(toIndex, 0, movedItem);
    setItems(newItems);
  };

  return (
    <DndProvider backend={HTML5Backend}>
      <div>
        {items.map((item, index) => (
          <Item
            key={item.id}
            id={item.id}
            text={item.text}
            index={index}
            moveItem={moveItem}
          />
        ))}
      </div>
    </DndProvider>
  );
};

使用react-beautiful-dnd实现

安装依赖库：

npm install react-beautiful-dnd

创建可排序列表：

import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';

const List = () => {
  const [items, setItems] = useState([
    { id: '1', content: 'Item 1' },
    { id: '2', content: 'Item 2' },
    { id: '3', content: 'Item 3' },
  ]);

  const handleDragEnd = (result) => {
    if (!result.destination) return;

    const newItems = Array.from(items);
    const [reorderedItem] = newItems.splice(result.source.index, 1);
    newItems.splice(result.destination.index, 0, reorderedItem);
    setItems(newItems);
  };

  return (
    <DragDropContext onDragEnd={handleDragEnd}>
      <Droppable droppableId="items">
        {(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}
                    style={{
                      padding: '8px',
                      margin: '4px',
                      border: '1px solid #ccc',
                      ...provided.draggableProps.style,
                    }}
                  >
                    {item.content}
                  </div>
                )}
              </Draggable>
            ))}
            {provided.placeholder}
          </div>
        )}
      </Droppable>
    </DragDropContext>
  );
};

性能优化建议

对于大型列表，使用react-window或react-virtualized进行虚拟滚动。在拖拽过程中避免不必要的重新渲染，可以使用React.memo优化子组件。

移动端兼容性

react-beautiful-dnd默认不支持移动端触摸事件，需要额外配置。react-dnd通过react-dnd-touch-backend可以支持触摸事件：

npm install react-dnd-touch-backend

使用时替换backend：

import { TouchBackend } from 'react-dnd-touch-backend';

// 在组件中
<DndProvider backend={TouchBackend} options={{ enableMouseEvents: true }}>
  {/* 你的组件 */}
</DndProvider>