sortablejs拖拽功能

官网：http://www.sortablejs.com/

中文文档：https://www.itxst.com/sortablejs/neuinffi.html

github地址如下：https://github.com/SortableJS/react-sortablejs

import React, { FC, useState } from 'react';
import { ReactSortable } from 'react-sortablejs';
interface ItemType {
id: number;
name: string;
}

const IndexPage: React.FC = () => {
const [state, setState] = useState<ItemType[]>([
{ id: 1, name: 'shrek' },
{ id: 2, name: 'fiona' },
{ id: 3, name: 'fiona1' },
{ id: 4, name: 'fiona1' },
{ id: 5, name: 'fiona2' },
{ id: 6, name: 'fiona3' },
{ id: 7, name: 'fiona4' },
{ id: 8, name: 'fiona5' },
{ id: 9, name: 'fiona' },
]);

return (
<ReactSortable
list={state}
setList={setState}
swapThreshold={1}
style={{ display: 'flex', flexWrap: 'wrap' }}
>
{state.map((item) => (
<div key={item.id}>{item.name}</div>
))}
</ReactSortable>
);
};
export default IndexPage;