react-sortablejs拖拽排序库用法示例

react-sortablejs 是一个用于实现可拖拽排序功能的 React 组件库。它是基于 SortableJS 库的封装，SortableJS 是一个支持拖拽和排序的 JavaScript 库。

使用 react-sortablejs 可以轻松地在 React 应用程序中实现可拖拽的列表、表格或其他元素的排序功能。

以下是一些 react-sortablejs 的主要特性：

简单易用: react-sortablejs 提供了一个易于使用的 React 组件，可以方便地将其集成到你的项目中。 灵活性: 你可以使用 react-sortablejs 在不同类型的元素（如列表、表格等）上实现拖拽排序。 可配置性: 你可以通过传递一些选项来配置拖拽行为，比如可以设置拖拽时的动画效果、回调函数等。 支持嵌套: react-sortablejs 可以处理嵌套的可排序元素，这意味着你可以在一个排序列表中包含其他可排序的子列表。 事件处理: 提供了一些事件处理函数，可以在拖拽开始、拖拽结束等事件发生时触发自定义的逻辑。 兼容性: 支持移动端和桌面端，可以在不同设备上正常工作。

安装react-sortablejs

npm install --save react-sortablejs
npm install --save-dev @types/sortablejs

# OR
yarn add react-sortablejs sortablejs
yarn add -D @types/sortablejs

以下是一个简单的示例，演示了如何在 React 应用中使用 react-sortablejs：

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

export const BasicFunction = (props) => {
  const [state, setState] = useState([
    { id: 1, name: "shrek" },
    { id: 2, name: "fiona" },
  ]);

  return (
    <ReactSortable list={state} setList={setState}>
      {state.map((item) => (
        <div key={item.id}>{item.name}</div>
      ))}
    </ReactSortable>
  );
};

在上面的示例中，我们创建了一个简单的可排序列表，其中包含了三个 <div> 元素。通过将它们包裹在 Sortable 组件内，并传递一些选项，我们就可以实现拖拽排序的功能。

下面是我在网站中的实际应用，可以通过拖拽的方式为item排序，并且比较灵活，不像有些库只能横着或者竖着排序。

import { useEffect, useState } from 'react';
import Box from '@mui/material/Box';
import { getNavItems } from './../../services/navItemService';
import NavItem from '../../comments/nav-item/NavItem';
import AddNavItem from '../../comments/add-nav-item/AddNavItem';
import { setProgress } from '../../utils/loadingUtil';
import { ReactSortable } from "react-sortablejs";
import './Index.css';

function Index() {
  const [list, setList] = useState([]);
  useEffect(() => {
    fetchData();
    async function fetchData() {
      setProgress(true);
      const result = await getNavItems();
      setList(result);
      setProgress(false);
    }
  }, []);
  return <Box>
    <ReactSortable list={list} setList={setList} className="DraggableTags">
      {list.map((item) => (
        <NavItem key={item.id} item={item}></NavItem>
      ))}
    </ReactSortable>
    <AddNavItem></AddNavItem>
  </Box>;
}

export default Index;

更新于：5个月前