React 17下实现拖拽排序图片列表的最佳npm包有哪些？

1. @dnd-kit（首选） #

它是react-sortable-hoc原作者推出的新一代拖拽库，完全兼容React 16.8及以上版本，原生支持排序功能，性能更优、API设计更合理，可完美解决老版本react-sortable-hoc的兼容问题。
安装命令：

npm install @dnd-kit/core @dnd-kit/sortable @dnd-kit/utilities

图片列表排序使用示例：

import React, { useState } from 'react';
import { DndContext, closestCenter, PointerSensor, useSensor, useSensors } from '@dnd-kit/core';
import { arrayMove, SortableContext, sortableKeyboardCoordinates, verticalListSortingStrategy, useSortable } from '@dnd-kit/sortable';
import { CSS } from '@dnd-kit/utilities';

// 单个可排序图片组件
function SortableImageItem({ id, url }) {
  const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id });
  const style = {
    transform: CSS.Transform.toString(transform),
    transition,
    margin: '10px 0',
    cursor: 'grab',
  };

  return (
    <div ref={setNodeRef} style={style} {...attributes} {...listeners}>
      <img src={url} alt="排序项" style={{ width: '200px', height: 'auto', borderRadius: '4px' }} />
    </div>
  );
}

function SortableImageList() {
  // 初始化图片列表，可替换为实际图片资源
  const [images, setImages] = useState([
    { id: '1', url: 'https://via.placeholder.com/200x150?text=图片1' },
    { id: '2', url: 'https://via.placeholder.com/200x150?text=图片2' },
    { id: '3', url: 'https://via.placeholder.com/200x150?text=图片3' },
    { id: '4', url: 'https://via.placeholder.com/200x150?text=图片4' },
  ]);

  const sensors = useSensors(useSensor(PointerSensor));

  const handleDragEnd = (event) => {
    const { active, over } = event;
    if (over && active.id !== over.id) {
      setImages((items) => {
        const oldIndex = items.findIndex((item) => item.id === active.id);
        const newIndex = items.findIndex((item) => item.id === over.id);
        return arrayMove(items, oldIndex, newIndex);
      });
    }
  };

  return (
    <div style={{ padding: '20px' }}>
      <h3>可拖拽排序图片列表</h3>
      <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
        <SortableContext items={images.map(i => i.id)} strategy={verticalListSortingStrategy}>
          {images.map((image) => (
            <SortableImageItem key={image.id} id={image.id} url={image.url} />
          ))}
        </SortableContext>
      </DndContext>
    </div>
  );
}

export default SortableImageList;

2. react-beautiful-dnd #

Atlassian出品的成熟拖拽库，13.1.1版本完全兼容React 17，生态完善、文档清晰，适合复杂拖拽场景。
安装命令：

npm install react-beautiful-dnd@13.1.1

图片列表排序使用示例：

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

function SortableImageList() {
  const [images, setImages] = useState([
    { id: '1', url: 'https://via.placeholder.com/200x150?text=图片1' },
    { id: '2', url: 'https://via.placeholder.com/200x150?text=图片2' },
    { id: '3', url: 'https://via.placeholder.com/200x150?text=图片3' },
    { id: '4', url: 'https://via.placeholder.com/200x150?text=图片4' },
  ]);

  const handleDragEnd = (result) => {
    if (!result.destination) return;
    const items = Array.from(images);
    const [reorderedItem] = items.splice(result.source.index, 1);
    items.splice(result.destination.index, 0, reorderedItem);
    setImages(items);
  };

  return (
    <div style={{ padding: '20px' }}>
      <h3>可拖拽排序图片列表</h3>
      <DragDropContext onDragEnd={handleDragEnd}>
        <Droppable droppableId="images">
          {(provided) => (
            <div {...provided.droppableProps} ref={provided.innerRef}>
              {images.map((image, index) => (
                <Draggable key={image.id} draggableId={image.id} index={index}>
                  {(provided) => (
                    <div
                      ref={provided.innerRef}
                      {...provided.draggableProps}
                      {...provided.dragHandleProps}
                      style={{
                        ...provided.draggableProps.style,
                        margin: '10px 0',
                        cursor: 'grab',
                      }}
                    >
                      <img src={image.url} alt="排序项" style={{ width: '200px', height: 'auto', borderRadius: '4px' }} />
                    </div>
                  )}
                </Draggable>
              ))}
              {provided.placeholder}
            </div>
          )}
        </Droppable>
      </DragDropContext>
    </div>
  );
}

export default SortableImageList;

补充说明 #

如果你仍要使用react-sortable-hoc，可将array-move降级到3.0.1版本解决报错问题，4.x以上版本为纯ESM规范包，与你当前使用的react-scripts 4.x版本不兼容，降级命令：npm install array-move@3.0.1

内容的提问来源于stack exchange，提问作者maifs