react-dnd 拖拽排序
<h3 id="开始">开始</h3><p>最近刚刚做完自定义表单的组件，分享一下拖拽排序。</p>
<h3 id="效果图">效果图</h3>
<p><img src="https://img2020.cnblogs.com/blog/1235934/202101/1235934-20210112155258999-944538356.gif" alt="" loading="lazy"></p>
<h3 id="react-dnd使用说明">react-dnd使用说明</h3>
<p>必须是这样格式的，不然会报 找不到上下文</p>
<pre><code><DndProvider backend={HTML5Backend}>
<useDrop>
<useDrag></useDrag>
</useDrop>
</DndProvider>
</code></pre>
<h3 id="准备工作">准备工作</h3>
<blockquote>
<p>官方文档</p>
</blockquote>
<p>https://react-dnd.github.io/react-dnd/about</p>
<blockquote>
<p>安装react-dnd、react-dnd-html5-backend</p>
</blockquote>
<pre><code class="language-javascript">npm install react-dnd react-dnd-html5-backend
</code></pre>
<h3 id="开始开发">开始开发</h3>
<blockquote>
<p>项目是基于ts的，不需要可自行删除</p>
</blockquote>
<h4 id="定义父组件">定义父组件</h4>
<pre><code>const Drag:React.FC<{}> = props => {
return (
<div className="drag-wrapper">
{/* DndProvider组件提供了react-dnd的功能，必须通过backend绑定HTML5Backend*/}
<DndProvider backend={HTML5Backend}>
<DragSortComponent/>
</DndProvider>
</div>
)
}
export default Drag
</code></pre>
<h4 id="定义内容组件">定义内容组件</h4>
<pre><code>const DragSortComponent:React.FC<{}> = props => {
const = useState<{id:number,name:string}[]>(List)
const = useState<{ key: number | null; value: string }>({
key: null,
value: '',
})
// 拖拽后的值
const sortItems = useRef<{ dragRow: any; placeRow: any; posi: string }>({
dragRow: {},
placeRow: {},
posi: '',
})
// 拖拽结束后的方法
const onDrop = (item: any, monitor: DropTargetMonitor) => {
const { dragRow, placeRow, posi } = sortItems.current
let _map: any[] = JSON.parse(JSON.stringify(list))
let index1 = _map.findIndex(v => v.id === dragRow.id) // 拖拽的itemIndex
_map.splice(index1, 1) // 先删掉拖拽的，在获取放置的
let index = _map.findIndex(v => v.id === placeRow.id) // 放置的itemIndex
if (index !== -1 && index1 !== -1) {
_map.splice(posi === 'bottom' ? index + 1 : index, 0, dragRow)
setList(() => _map)
}
}
// DragSortItemComponent组件是通用排序组件，所以需要在父组件在定义一个useDrop,来改变数据 必须挂载在父级div
const [, drop] = useDrop({
accept: 'sort', // 必须和拖拽的accept一致
drop: onDrop,
collect: monitor => ({
isOver: monitor.isOver({ shallow: true }),
canDrop: monitor.canDrop(),
}),
})
const onItemDragClass = (key:number,value:string) => {
if (itemClass.value !== value) {
setItemClass(() => {
let data = { key, value }
return data
})
}
}
const onSortItemChange = (dragRow: any, placeRow: any, posi: string) => {
sortItems.current = { dragRow, placeRow, posi }
}
return (
<div className="drag-sort-component-wrapper" ref={drop}>
{
list.map(v => (
<DragSortItemComponent
key={v.id}
row={v}
onItemDragClass={onItemDragClass}
onSortItemChange={onSortItemChange}
keyName="id"
>
<div className={['drag-item ',itemClass.key === v.id ? itemClass.value : ''].join(' ')}>{v.name}</div>
</DragSortItemComponent>
))
}
</div>
)
}
</code></pre>
<h4 id="定义拖拽排序组件">定义拖拽排序组件</h4>
<pre><code>/**
* 通用拖拽排序的容器
* @param row 当前行
* @param onItemDragClass 拖拽过程的样式 top | bottom
* @param onSortItemChange 拖拽结束后返回的值 dragRow 当前拖拽 placeRow 放置的，posi 位置 top | bottom
* @param keyName 键名
*/
type IProps = {
row: any,
onItemDragClass: (key:number,value:string) => void,
onSortItemChange: (dragRow: any, placeRow: any, posi: string) => void // 排序后
keyName: string
}
const DragSortItemComponent:React.FC<IProps> = props => {
const { row,onItemDragClass,onSortItemChange,keyName } = props
const ref = useRef<HTMLDivElement>(null)
/**
* 拖拽容器
*/
const [, drop] = useDrop({
// 定义拖拽的类型
accept: 'sort',
drop: (item, monitor) => {
const didDrop = monitor.didDrop()
if (didDrop) {
return
}
},
canDrop: (item, mointor) => {
// 阻止默认拖拽释放
onItemDragClass(row, '')
return false
},
hover: (item: any, monitor) => {
const didHover = monitor.isOver({ shallow: true })
if (didHover) {
// 拖拽目标的id
const dragIndex = item
// 放置目标id可以用index | id 只要是number，数据里唯一的就可以
const hoverIndex = row
// 如果一样不处理
if (dragIndex === hoverIndex) {
onItemDragClass(row, '')
return
}
// 获取放置的位置
const hoverBoundingRect = ref.current?.getBoundingClientRect() as DOMRect
// 获取放置的Y轴中点
const hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2
// 获取拖拽目标偏移量
const clientOffset = monitor.getClientOffset() as XYCoord
const hoverClientY = clientOffset.y - hoverBoundingRect.top
if (dragIndex !== hoverIndex) {
if (hoverMiddleY < hoverClientY) {
onItemDragClass(row, 'bottom')
} else {
onItemDragClass(row, 'top')
}
// 如果不做成通用拖拽容器，把参数存起来，把这个放在useDrag的end方法里,
onSortItemChange(item, row, hoverMiddleY < hoverClientY ? 'bottom' : 'top')
}
}
},
collect: monitor => ({
isOver: monitor.isOver({ shallow: true }),
canDrop: monitor.canDrop(),
}),
})
/**
* 定义拖拽
* isDragging 是否拖拽
*/
const [{ isDragging }, drag] = useDrag({
item: { ...row, type: 'sort'},
end: () => {
// onSortItemChange(item, row, hoverMiddleY < hoverClientY ? 'bottom' : 'top')
},
collect: monitor => ({
isDragging: monitor.isDragging(),
didDrop: monitor.isDragging(),
}),
})
drop(drag(ref))
return (
<div ref={ref} style={{ opacity: isDragging ? 0 : 1 }}>
{props.children}
</div>
)
}
</code></pre>
<h3 id="github地址">github地址</h3>
<p>https://github.com/GeFei-someone/drag-sort</p><br><br>
来源：https://www.cnblogs.com/feiyu159/p/14267401.html
頁:
[1]