拖拽插件代码

import { DndProvider } from “react-dnd”;
import { HTML5Backend } from “react-dnd-html5-backend”;

{list && list.length>0 ?

{ list.map((item, index) => ) }

: null}

setlist = (list) => {
this.setState({
list: […list]
})
}

下面的代码就是 组件Dnd的代码

import React, { useState, useRef } from ‘react’

import { useDrag, useDrop } from “react-dnd”

interface ItemType {
item: number;
index: number;
type: string;
list: any;
setList: any;
}

const Dnd: React.FC = (props) => {
const { item, index, type, list, setList } = props
const style = {
// padding: ‘10px’,
margin: ‘10px’,
// border: ‘1px solid red’,
cursor: ‘move’,
width: ‘100px’,
lineHeight: ‘40px’,
textAlign: ‘center’,
background: ‘#23aeff’,
color: ‘#fff’,
float: ‘left’
}

let ref = useRef()
// useDrop的accept和useDrag的type相同才能相互拖拽
const [, drop] = useDrop({
accept: type,
collect: () => ({}),
hover(item: any, monitor: any) {
// 拖拽的索引
const dragIndex = item.index
// 放置目标的索引
const hoverIndex = index
// 如果拖拽目标和放置目标相同就return
if (dragIndex === hoverIndex) return
const { top, bottom } = ref.current.getBoundingClientRect()
// 放置目标半的高度
const halOfHoverHeigth = (bottom - top) / 2
const { y } = monitor.getClientOffset()
const hoverClientY = y - top
// 当移动到防止目标一半时切换位置
if (
(dragIndex < hoverIndex && hoverClientY > halOfHoverHeigth) ||
(dragIndex > hoverIndex && hoverClientY < halOfHoverHeigth)
) {
const dragItem = list[dragIndex]
list.splice(dragIndex, 1)
list.splice(hoverIndex, 0, dragItem)
setList([…list])

    item.index = hoverIndex
  }
}

})
const [{ isDragging }, drag] = useDrag({
type,
item: () => ({ item, index }),
collect: (monitor) => ({
isDragging: monitor.isDragging()
})
})
const opacity = isDragging ? 0.4 : 1
drag(drop(ref))

return (
<div className=‘item’ ref={ref} style={{ …style, opacity }}>
{item}

)
}
export default Dnd