Html自带拖拽drag，平板和手机使用touch react-dnd:drag and drop 缩写一般不是元音

使用

1. dndProvider包裹dom元素

拖动的api

2.useDrag

hook提供的一种将组件作为拖拽源连接到react-dnd系统中的方法

//useDrag针对唯一的一个类型的项目，需要传递一个类型给useDrag
let [{isDragging}，drag]=useDrag({
type:'aa',
item:()=>({id,index})  //用来描述元素的具体js对象
//收集功能，用来手机属性的，返回一个js对象，并且返回会合并到组件的属性中
collect:(monitor)=>({
  //monitor存储拖拽的状态
  // isDragging 拖动状态
  isDragging:monitor.isDragging()  
})
})

3.drag(ref)

//ref为useRefs连接的dom，drag连接dom
//useDrag 对应的项目拖动源 DragSource
//useDrop 对应的项目叫做放置目标 DropTarget

放置的api

1. useDrop

et [，drop]=useDrop({
accept:'aa',  //这个放置目标指挥对指定的类型源发生反应
collect:()=>({})，
//拖动放置 的对象发生反应
hover(item,monitor){
//item即useDrag 的item
  const dragIndex=item.index //被拖动元素的索引
const hoverIndex=index //正在hover卡片的索引
if（dragIndex===hoverIndex）{return}  //不发生拖动
//拖动的条件是拖动的距离超过元素的二分之一
const {top,bottom}=ref.current.getBoundingClientReact();
const halfOfHoverHeight=(bottom-top)/2;
const {y}=monitor.getClientOffset();
const hoverClientY=y-top
if( (dragIndex<hoverIndex&&hoverClientY>halfOfHoverHeight) ||
(dragIndex>hoverIndex&&hoverClientY<halfOfHoverHeight) ){
  moveCard(dragIndex,hoverIndex)  //拖动的方法，用于触发组件内的方法修改元素
  item.index=hoverIndex
}
}
})

2.drop(ref)
需要绑定dom