react-sortablejs介绍

react-sortablejs 是一个 React 封装库，基于流行的拖拽排序库 SortableJS，可以让你在 React 项目中方便地实现 列表、网格等元素的拖拽排序和拖放功能。

它的核心理念就是：在 React 中通过组件化的方式使用 SortableJS，并且更好地处理状态同步。

1. 核心功能

拖拽排序（Drag & Drop）
- 列表内的元素可以通过拖拽重新排序
跨列表拖拽（Multi-list Drag & Drop）
- 支持从一个列表拖到另一个列表
动画效果（Animation）
- 元素移动时自动带有过渡动画
支持 React 状态同步
- 拖拽完成后可以更新 React 的 state，保持 UI 一致
事件丰富
- 支持 onStart、onEnd、onAdd、onRemove、onUpdate 等回调

2. 安装

npm install react-sortablejs sortablejs

注意：react-sortablejs 是一个 React 封装库，依赖底层的 sortablejs。

3. 基本用法

简单列表排序

import React, { useState } from "react";
import Sortable from "react-sortablejs";

function App() {
  const [items, setItems] = useState(["🍎 Apple", "🍌 Banana", "🍊 Orange"]);

  return (
    <Sortable
      tag="ul"              // 渲染的外层标签
      list={items}          // 绑定数组
      setList={setItems}    // 拖拽后更新数组
      animation={150}       // 拖拽动画时间(ms)
    >
      {items.map((item) => (
        <li key={item}>{item}</li>
      ))}
    </Sortable>
  );
}

export default App;

拖拽排序后，items 会自动更新。

4. 跨列表拖拽

import React, { useState } from "react";
import Sortable from "react-sortablejs";

function MultiList() {
  const [fruits, setFruits] = useState(["🍎 Apple", "🍌 Banana"]);
  const [veggies, setVeggies] = useState(["🥦 Broccoli", "🥕 Carrot"]);

  return (
    <div style={{ display: "flex", gap: "20px" }}>
      <Sortable
        list={fruits}
        setList={setFruits}
        group="shared"       // 两个列表 group 名字一致，支持互相拖拽
      >
        {fruits.map((item) => <div key={item}>{item}</div>)}
      </Sortable>

      <Sortable
        list={veggies}
        setList={setVeggies}
        group="shared"
      >
        {veggies.map((item) => <div key={item}>{item}</div>)}
      </Sortable>
    </div>
  );
}

这样 fruits 和 veggies 列表之间可以互相拖拽。

5. 常用属性

list / setList：绑定数组和更新数组的方法（核心）
tag：渲染容器标签（默认 div）
animation：拖拽时的动画（ms）
group：实现跨列表拖拽
ghostClass：拖拽时的元素样式类
onStart / onEnd / onAdd / onRemove / onUpdate：事件回调
其他属性直接透传给底层 SortableJS，例如 handle、filter、disabled

6. 优缺点

优点：

直接在 React 里使用，简化状态管理
支持多列表拖拽
提供动画和丰富事件
与 React 状态（useState）天然兼容

缺点：

对性能要求高的复杂场景可能需要优化（虚拟列表结合时较麻烦）
基于 SortableJS，一些更底层的事件仍然依赖原生配置