外观
第51章—基于react-dnd实现拖拽排序
拖拽是常见的需求，在 react 里我们会用 react-dnd 来做。
这节我们通过一个拖拽排序的案例来入门下 react-dnd。
npx create-react-app --template=typescript react-dnd-test新建个 react 项目
安装 react-dnd 相关的包：
npm install react-dnd react-dnd-html5-backend然后改一下 App.tsx
import './App.css';
function Box() {
return <div className='box'></div>
}
function Container() {
return <div className="container"></div>
}
function App() {
return <div>
<Container></Container>
<Box></Box>
</div>
}
export default App;css 部分如下：
.box {
width: 50px;
height: 50px;
background: blue;
margin: 10px;
}
.container {
width: 300px;
height: 300px;
border: 1px solid #000;
}把它跑起来：
npm run start是这样的：
现在我们想把 box 拖拽到 container 里，用 react-dnd 怎么做呢？
dnd 是 drag and drop 的意思，api 也分有两个 useDrag 和 useDrop。
box 部分用 useDrag 让元素可以拖拽：
function Box() {
const ref = useRef(null);
const [, drag]= useDrag({
type: 'box',
item: {
color: 'blue'
}
});
drag(ref);
return <div ref={ref} className='box'></div>
}用 useRef 保存 dom 引用，然后用 useDrag 返回的第二个参数处理它。
至于 type 和 item，后面再讲。
然后是 Container：
function Container() {
const ref = useRef(null);
const [,drop] = useDrop(() => {
return {
accept: 'box',
drop(item) {
console.log(item);
}
}
});
drop(ref);
return <div ref={ref} className="container"></div>
}用 useDrop 让它可以接受拖拽过来的元素。
接收什么元素呢？
就是我们 useDrag 的时候声明的 type 的元素。
在 drop 的时候会触发 drop 回调函数，第一个参数是 item，就是 drag 的元素声明的那个。
只是这样还不行，还要在根组件加上 Context：
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import { DndProvider } from 'react-dnd';
import { HTML5Backend } from 'react-dnd-html5-backend';
const root = ReactDOM.createRoot(
document.getElementById('root') as HTMLElement
);
root.render(<DndProvider backend={HTML5Backend}><App></App></DndProvider>);之前是直接渲染 App，现在要在外面加上 DndProvider。
这个就是设置 dnd 的 context的，用于在不同组件之间共享数据。
然后我们试试看：
确实，现在元素能 drag 了，并且拖到目标元素也能触发 drop 事件，传入 item 数据。
那如果 type 不一样呢？
那就触发不了 drop 了。
然后我们给 Box 组件添加一个 color 的 props，用来设置背景颜色：
并且给 item 的数据加上类型。
interface ItemType {
color: string;
}
interface BoxProps {
color: string
}
function Box(props: BoxProps) {
const ref = useRef(null);
const [, drag]= useDrag({
type: 'box',
item: {
color: props.color
}
});
drag(ref);
return <div ref={ref} className='box' style={
{ background: props.color || 'blue'}
}></div>
}添加几个 Box 组件试一下：
没啥问题。
然后我们改下 Container 组件，增加一个 boxes 数组的 state，在 drop 的时候把 item 加到数组里，并触发渲染：
function Container() {
const [boxes, setBoxes] = useState<ItemType[]>([]);
const ref = useRef(null);
const [,drop] = useDrop(() => {
return {
accept: 'box',
drop(item: ItemType) {
setBoxes((boxes) => [...boxes, item])
}
}
});
drop(ref);
return <div ref={ref} className="container">
{
boxes.map(item => {
return <Box color={item.color}></Box>
})
}
</div>
}这里 setBoxes 用了函数的形式，这样能拿到最新的 boxes 数组，不然会形成闭包，始终引用最初的空数组。
测试下：
这样，拖拽到容器里的功能就实现了。
我们再加上一些拖拽过程中的效果：
useDrag 可以传一个 collect 的回调函数，它的参数是 monitor，可以拿到拖拽过程中的状态。
collect 的返回值会作为 useDrag 的返回的第一个值。
我们判断下，如果是在 dragging 就设置一个 dragging 的 className。
function Box(props: BoxProps) {
const ref = useRef(null);
const [{dragging}, drag]= useDrag({
type: 'box',
item: {
color: props.color
},
collect(monitor) {
return {
dragging: monitor.isDragging()
}
}
});
drag(ref);
return <div ref={ref} className={ dragging ? 'box dragging' : 'box'} style={
{ background: props.color || 'blue'}
}></div>
}然后添加 dragging 的样式：
.dragging {
border: 5px dashed #000;
box-sizing: border-box;
}测试下：
确实，这样就给拖拽中的元素加上了对应的样式。
但如果我们想把这个预览的样式也给改了呢？
这时候就要新建个组件了：
const DragLayer = () => {
const { isDragging, item, currentOffset} = useDragLayer((monitor) => ({
item: monitor.getItem(),
isDragging: monitor.isDragging(),
currentOffset: monitor.getSourceClientOffset(),
}));
if (!isDragging) {
return null;
}
return (
<div className='drag-layer' style={{
left: currentOffset?.x,
top: currentOffset?.y
}}>{item.color} 拖拖拖</div>
);
}useDragLayer 的参数是函数，能拿到 monitor，从中取出很多东西，比如 item、isDragging，还是有 clientOffset，也就是拖拽过程中的坐标。
其中 drag-layer 的样式如下：
.drag-layer {
position: fixed;
}引入下这个组件：
现在的效果是这样的：
确实加上了自定义的预览样式，但是原来的还保留着。
这个也可以去掉：
useDrag 的第三个参数就是处理预览元素的，我们用 getEmptyImage 替换它，就看不到了。
dragPreview(getEmptyImage())这时候就只有我们自定义的预览样式了：
但其实这种逻辑只要执行一次就行，我们优化一下：
useEffect(() => {
drag(ref);
dragPreview(getEmptyImage(), { captureDraggingState: true });
}, [])drop 的逻辑也同样：
useEffect(()=> {
drop(ref);
}, []);这样，我们就学会了 react-dnd 的基本使用。
总结下：
- 使用 useDrag 处理拖拽的元素，使用 useDrop 处理 drop 的元素，使用 useDragLayer 处理自定义预览元素
- 在根组件使用 DndProvider 设置 context 来传递数据
- useDrag 可以传入 type、item、collect 等。type 标识类型，同类型才可以 drop。item 是传递的数据。collect 接收 monitor，可以取拖拽的状态比如 isDragging 返回。
- useDrag 返回三个值，第一个值是 collect 函数返回值，第二个是处理 drag 的元素的函数，第三个值是处理预览元素的函数
- useDrop 可以传入 accept、drop 等。accept 是可以 drop 的类型。drop 回调函数可以拿到 item，也就是 drag 元素的数据
- useDragLayer 的回调函数会传入 monitor，可以拿到拖拽的实时坐标，用来设置自定义预览效果
全部代码如下：
import { useDrag, useDragLayer, useDrop } from 'react-dnd';
import './App.css';
import { useEffect, useRef, useState } from 'react';
import { getEmptyImage } from 'react-dnd-html5-backend'
interface ItemType {
color: string;
}
interface BoxProps {
color: string
}
function Box(props: BoxProps) {
const ref = useRef(null);
const [{dragging}, drag, dragPreview]= useDrag({
type: 'box',
item: {
color: props.color
},
collect(monitor) {
return {
dragging: monitor.isDragging()
}
}
});
useEffect(() => {
drag(ref);
dragPreview(getEmptyImage());
}, [])
return <div ref={ref} className={ dragging ? 'box dragging' : 'box'} style={
{ background: props.color || 'blue'}
}></div>
}
function Container() {
const [boxes, setBoxes] = useState<ItemType[]>([]);
const ref = useRef(null);
const [,drop] = useDrop(() => {
return {
accept: 'box',
drop(item: ItemType) {
setBoxes((boxes) => [...boxes, item])
}
}
});
useEffect(()=> {
drop(ref);
}, []);
return <div ref={ref} className="container">
{
boxes.map(item => {
return <Box color={item.color}></Box>
})
}
</div>
}
const DragLayer = () => {
const { isDragging, item, currentOffset} = useDragLayer((monitor) => ({
item: monitor.getItem(),
isDragging: monitor.isDragging(),
currentOffset: monitor.getSourceClientOffset(),
}));
if (!isDragging) {
return null;
}
return (
<div className='drag-layer' style={{
left: currentOffset?.x,
top: currentOffset?.y
}}>{item.color}拖拖拖</div>
);
}
function App() {
return <div>
<Container></Container>
<Box color="blue"></Box>
<Box color="red"></Box>
<Box color="green"></Box>
<DragLayer></DragLayer>
</div>
}
export default App;css：
.box {
width: 50px;
height: 50px;
background: blue;
margin: 10px;
}
.dragging {
border: 5px dashed #000;
box-sizing: border-box;
}
.drag-layer {
position: fixed;
}
.container {
width: 300px;
height: 300px;
border: 1px solid #000;
}入了门之后，我们再来做个进阶案例：拖拽排序
我们写个 App2.tsx
import { useState } from "react";
import './App2.css';
interface CardItem {
id: number;
content: string;
}
interface CardProps {
data: CardItem
}
function Card(props: CardProps) {
const { data } = props;
return <div className="card">{data.content}</div>
}
function App() {
const [cardList, setCardList] = useState<CardItem[]>([
{
id:0,
content: '000',
},
{
id:1,
content: '111',
},
{
id:2,
content: '222',
},
{
id:3,
content: '333',
},
{
id:4,
content: '444',
}
]);
return <div className="card-list">
{
cardList.map((item: CardItem) => (
<Card data={item} key={'card_' + item.id} />
))
}
</div>
}
export default App;还有 App2.css：
.card {
width: 200px;
line-height: 60px;
padding: 0 20px;
border: 1px solid #000;
margin: 10px;
cursor: move;
}就是根据 cardList 的数据渲染一个列表。
把它渲染出来是这样的：
拖拽排序，显然 drag 和 drop 的都是 Card。
我们给它加上 useDrag 和 useDrop：
function Card(props: CardProps) {
const { data } = props;
const ref = useRef(null);
const [, drag] = useDrag({
type: 'card',
item: props.data
});
const [, drop] = useDrop({
accept: 'card',
drop(item) {
console.log(item);
}
});
useEffect(() => {
drag(ref);
drop(ref);
}, []);
return <div ref={ref} className="card">{data.content}</div>
}接下来做的很显然就是交换位置了。
我们实现一个交换位置的方法，传入 Card 组件，并且把当前的 index 也传入：
const swapIndex = useCallback((index1: number, index2: number) => {
const tmp = cardList[index1];
cardList[index1] = cardList[index2];
cardList[index2] = tmp;
setCardList([...cardList]);
}, [])这里 setState 时需要创建一个新的数组，才能触发渲染。
然后在 Card 组件里调用下：
增加 index 和 swapIndex 两个参数，声明 drag 传递的 item 数据的类型
在 drop 的时候互换 item.index 和当前 drop 的 index 的 Card
interface CardProps {
data: CardItem;
index: number;
swapIndex: Function;
}
interface DragData {
id: number;
index: number;
}
function Card(props: CardProps) {
const { data, swapIndex, index } = props;
const ref = useRef(null);
const [, drag] = useDrag({
type: 'card',
item: {
id: data.id,
index: index
}
});
const [, drop] = useDrop({
accept: 'card',
drop(item: DragData) {
swapIndex(index, item.index)
}
});
useEffect(() => {
drag(ref);
drop(ref);
}, []);
return <div ref={ref} className="card">{data.content}</div>
}这样就实现了拖拽排序。
不过因为背景是透明的，看着不是很明显。
我们设置个背景色：
清晰多了。
但是现在是 drop 的时候才改变位置，如果希望在 hover 的时候就改变位置呢？
useDrop 有 hover 时的回调函数，我们把 drop 改成 hover就好了：
但现在你会发现它一直在换：
那是因为交换位置后，没有修改 item.index 为新的位置，导致交换逻辑一致触发：
在 hover 时就改变顺序，体验好多了。
然后我们再处理下拖拽时的样式。
样式如下：
.dragging {
border-style: dashed;
background: #fff;
}效果是这样的：
这样，拖拽排序就完成了。
我们对 react-dnd 的掌握又加深了一分。
这个案例的全部代码如下：
import { useCallback, useEffect, useRef, useState } from "react";
import './App2.css';
import { useDrag, useDrop } from "react-dnd";
interface CardItem {
id: number;
content: string;
}
interface CardProps {
data: CardItem;
index: number;
swapIndex: Function;
}
interface DragData {
id: number;
index: number;
}
function Card(props: CardProps) {
const { data, swapIndex, index } = props;
const ref = useRef(null);
const [{ dragging }, drag] = useDrag({
type: 'card',
item: {
id: data.id,
index: index
},
collect(monitor) {
return {
dragging: monitor.isDragging()
}
}
});
const [, drop] = useDrop({
accept: 'card',
hover(item: DragData) {
swapIndex(index, item.index);
item.index = index;
}
// drop(item: DragData) {
// swapIndex(index, item.index)
// }
});
useEffect(() => {
drag(ref);
drop(ref);
}, []);
return <div ref={ref} className={ dragging ? 'card dragging' : 'card'}>{data.content}</div>
}
function App() {
const [cardList, setCardList] = useState<CardItem[]>([
{
id:0,
content: '000',
},
{
id:1,
content: '111',
},
{
id:2,
content: '222',
},
{
id:3,
content: '333',
},
{
id:4,
content: '444',
}
]);
const swapIndex = useCallback((index1: number, index2: number) => {
const tmp = cardList[index1];
cardList[index1] = cardList[index2];
cardList[index2] = tmp;
setCardList([...cardList]);
}, [])
return <div className="card-list">
{
cardList.map((item: CardItem, index) => (
<Card data={item} key={'card_' + item.id} index={index} swapIndex={swapIndex}/>
))
}
</div>
}
export default App;css：
.card {
width: 200px;
line-height: 60px;
padding: 0 20px;
border: 1px solid #000;
background: skyblue;
margin: 10px;
cursor: move;
}
.dragging {
border-style: dashed;
background: #fff;
}案例代码上传了小册仓库
总结
我们学了 react-dnd 并用它实现了拖拽排序。
react-dnd 主要就是 useDrag、useDrop、useDragLayout 这 3 个 API。
useDrag 是给元素添加拖拽，指定 item、type、collect 等参数。
useDrop 是给元素添加 drop，指定 accepet、drop、hover、collect 等参数。
useDragLayout 是自定义预览，可以通过 monitor 拿到拖拽的实时位置。
此外，最外层还要加上 DndProvider，用来组件之间传递数据。
其实各种拖拽功能的实现思路比较固定：什么元素可以拖拽，什么元素可以 drop，drop 或者 hover 的时候修改数据触发重新渲染就好了。
比如拖拽排序就是 hover 的时候互换两个 index 的对应的数据，然后 setState 触发渲染。
用 react-dnd，我们能实现各种基于拖拽的功能。