dnd

dnd 使用

1. 引入

import { DndProvider, useDrag, useDrop } from 'react-dnd'
import { HTML5Backend } from 'react-dnd-html5-backend'

<DndProvider backend={HTML5Backend}>
{
    list.map(i => (
        <SortDrag handleAry={handleAry} key={i} cardInfo={i} />
    ))
}
</DndProvider>

// 监听当前卡片的拖事件
const [{ isDragging }, drag] = useDrag({
    type,                               // 当前卡片所属的类型, 配合放事件的accept
    item: info,                         // 当前卡片信息（drop能获取到）
    collect: monitor => ({              // 事件连接器
      isDragging: monitor.isDragging(), // isDragging更改会触发这个 SortDrag 组件更新 
    }),
})

// 监听物体是否被放置在自身上的事件
const [isOver, drop] = useDrop({
    accept: type,                       // 可以接受的类型
    // 放置上去的事件
    drop: (item: any) => {
        // 过滤自身
        if (item.id === id) return
        // 操作...
    },
    collect: monitor => {
        // isOver 更改时会触发这个 SortDrag 组件更新
        const item = monitor.getItem()
        // 过滤自身
        if (item && item.id === id) return false 
        return monitor.isOver()
    },
})

useEffect(() => {
    drag(domRef.current)
    drop(domRef.current)
}, [])
// 根据 isOver isDragging 更改样式