React+sortablejs列表拖拽

antd官网推荐了几个 拖拽 工具类，dnd-kit ｜ react-beautiful-dnd ｜ react-dnd react-sortable-hoc ，拖拽实现方式好多种，下面我们使用 sortablejs 可快速简洁的实现拖拽。

下面是核心代码，其他省略。

// app.tsx
...
import { useRef } from 'react' 
import Sortable, { SortableEvent } from 'sortablejs'
import arrayMove from 'array-move'

const App:FC = () => {
  ...
  const Ref = useRef(null)
  const handleSortEnd = useCallback((e: SortableEvent) => {
        const { newIndex, oldIndex } = e
        // 具体逻辑
        ...
    }, [])

  useEffect(() => {
        setTimeout(() => {
            new Sortable(SearchListRef.current!, {
                group: 'search',
                animation: 150,
                handle: '.sort-handle',
                onEnd: handleSortEnd //拖拽结束动作
            })
        }, 0);
    }, [handleSortEnd])
  return <div ref={Ref}>
      <ul>
         <li className='sort-handle'>xhh1</li>
         <li className='sort-handle'>xhh2</li>
      </ul>
    </div>
}