antd官網(wǎng)推薦了幾個(gè) 拖拽 工具類(lèi)况鸣，dnd-kit ｜ react-beautiful-dnd ｜ react-dnd react-sortable-hoc ，拖拽實(shí)現(xiàn)方式好多種幼衰，下面我們使用 sortablejs 可快速簡(jiǎn)潔的實(shí)現(xiàn)拖拽阿弃。
下面是核心代碼诊霹，其他省略羞延。
// 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 //拖拽結(jié)束動(dòng)作
})
}, 0);
}, [handleSortEnd])
return <div ref={Ref}>
<ul>
<li className='sort-handle'>xhh1</li>
<li className='sort-handle'>xhh2</li>
</ul>
</div>
}
