现在有一个新需求就是需要对一个列表，实现拖拽排序的功能，要实现的效果如下图：
可以通过 react-dnd 或者 react-beautiful-dnd 两种方式实现，今天先讲下使用react-dnd是如何实现的，github地址：
https://react-dnd.github.io/react-dnd/docs/api/dnd-provider
1.先安装依赖
npm i react-dnd
npm i react-dnd-html5-backend
2.创建一个 index.js 文件
DndProvider 组件为您的应用程序提供 React-DnD 功能。这必须通过 backend 支柱注入后端，但也可以注入 window 物体。
backend ：必填。一个React DnD后端。除非您正在编写自定义的，否则您可能希望使用React DnD附带的HTML5后端。 context ： 可选的。用于配置后端的后端上下文。这取决于后端实现。 options ： 可选的。用于配置后端的选项对象。这取决于后端实现。import React from 'react'
import Example from './example'
import { DndProvider } from 'react-dnd'
import HTML5Backend from 'react-dnd-html5-backend'
class App extends React.Component{
/**
* 获取排序后的新数据回调函数
*/
handlePreviewList = (previewList) => {
this.setState({
previewList
})
}
return (
<div className="App">
<DndProvider backend={HTML5Backend}>
<Example previewList={previewList}
handlePreviewList={this.handlePreviewList}/>
</DndProvider>
</div>
)
}
export default App;
3.新建example.js文件
previewList是 index.js组件传入的数据。
handlePreviewList 是保存排序后的新数据。
import React, { useState } from 'react'
import TopicList from './TopicList';
const Container = ({ previewList, handlePreviewList }) => {
{
const [topic] = useState(previewList)
const handleDND = (dragIndex, hoverIndex) => {
let tmp = previewList[dragIndex] //临时储存文件
previewList.splice(dragIndex, 1) //移除拖拽项
previewList.splice(hoverIndex, 0, tmp) //插入放置项
handlePreviewList(previewList)
};
const renderCard = (item, index) => {
return (
<TopicList
key={item.questionTuid}
index={index}
id={item.questionTuid}
text={item.questionContent}
moveCard={handleDND}
/>
)
}
return (
<div>
{
topic.map((item, i) => renderCard(item, i))
}
</div>
)
}
}
export default Container
4.新建TopicLis.js文件
useDrag 一个钩子，用于将当前组件用作拖动源。
参数
spec 规范对象
返回值数组
Index 0 ：包含collect函数中收集的属性的对象。如果 collect 未定义任何函数，则返回空对象。 Index 1 ：拖动源的连接器功能。这必须附加到DOM的可拖动部分。 Index 2 ：拖动预览的连接器功能。这可以附加到DOM的预览部分。规范对象成员
item ：必填。一个简单的JavaScript对象，描述被拖动的数据。这是关于拖动源的放置目标可用的唯一信息，因此选择他们需要知道的最小数据非常重要。你可能想在这里放一个复杂的引用，但是你应该尽量避免这样做，因为它耦合了拖动源和放下目标。返回类似于 { type, id } 此方法的东西是个好主意。 item.type 必须设置 ，它必须是字符串，ES6符号。只有为相同类型注册的放置目标才会对此项目做出反应。阅读概述以了解有关项目和类型的更多信息。 previewOptions ： 可选的。描述拖动预览选项的纯JavaScript对象。 options ： 可选的。一个普通的对象。如果组件的某些道具不是标量（即，不是原始值或函数），则 arePropsEqual(props, otherProps) 在 options 对象内指定自定义函数可以提高性能。除非您遇到性能问题，否则不要担心。 begin(monitor) ： 可选的。拖动操作开始时触发。不需要返回任何内容，但如果返回一个对象，它将覆盖 item 规范的默认属性。 end(item, monitor) ： 可选的。当拖动停止时， end 被调用。对于每个 begin 呼叫， end 保证相应的呼叫。您可以调用 monitor.didDrop() 以检查丢弃是否由兼容的放置目标处理。如果它被处理，并且放置目标通过从其方法返回普通对象来指定放置结果 drop() ，则它将可用作 monitor.getDropResult() 。此方法是触发Flux动作的好地方。注意：如果在拖动时卸载组件，则 component 参数设置为 null 。 canDrag(monitor) ： 可选的。用它来指定当前是否允许拖动。如果您想要始终允许它，只需省略此方法即可。如果您想基于某些谓词禁用拖动，则指定它很方便 props 。注意：您可能无法调用 monitor.canDrag() 此方法。 isDragging(monitor) ： 可选的。默认情况下，仅启动拖动操作的拖动源被视为拖动。您可以通过定义自定义 isDragging 方法来覆盖此行为。它可能会返回类似的东西 props.id === monitor.getItem().id 。如果在拖动过程中可以卸载原始组件并在以后使用其他父级“复活”，则执行此操作。例如，当在卡片板中的列表中移动卡时，您希望它保留拖动的外观 - 即使在技术上，组件也会被卸载，并且每次将其移动到另一个列表时都会安装另一个组件。注意：您可能无法调用 monitor.isDragging() 此方法。 collect ： 可选的。收集功能。它应该返回一个普通的道具对象返回注入你的组件。它接收两个参数， monitor 和 props 。 阅读概述 ，了解监视器和收集功能的介绍。请参阅下一节中详细描述的收集功能。useDrop 一个钩子，用于将当前组件用作放置目标。
参数
spec 规范对象
返回值数组
Index 0 ：包含collect函数中收集的属性的对象。如果 collect 未定义任何函数，则返回空对象。 Index 1 ：放置目标的连接器功能。这必须附加到DOM的drop-target部分。规范对象成员
accept ：必填。一个字符串，一个ES6符号，一个数组或一个返回给定组件的函数的函数 props 。此放置目标仅对指定类型的拖动源生成的项目作出反应。 options ： 可选的。一个普通的对象。如果组件的某些道具不是标量（即，不是原始值或函数），则 arePropsEqual(props, otherProps) 在 options 对象内指定自定义函数可以提高性能。除非您遇到性能问题，否则不要担心。 drop(item, monitor) ： 可选的。在目标上放置兼容项目时调用。您可以返回undefined或普通对象。如果返回一个对象，它将成为放置结果，并且可以在其 endDrag 方法中作为拖动源使用 monitor.getDropResult() 。如果您希望根据接收到丢弃的目标执行不同的操作，这非常有用。如果您有嵌套的放置目标，则可以 drop 通过检查 monitor.didDrop() 和测试是否已经处理了嵌套目标 monitor.getDropResult() 。此方法和源 endDrag 方法都是触发Flux操作的好地方。如果 canDrop() 已定义并返回，则不会调用此方法 false 。 hover(item, monitor) ： 可选的。当项目悬停在组件上时调用。您可以检查 monitor.isOver({ shallow: true }) 以测试悬停是仅发生在当前目标上还是嵌套上。与 drop() 此不同，即使 canDrop() 定义并返回，也会调用此方法 false 。您可以检查 monitor.canDrop() 以测试是否是这种情况。 canDrop(item, monitor) ： 可选的。使用它来指定放置目标是否能够接受该项目。如果您想要始终允许它，只需省略此方法即可。如果你想基于某个谓词over props 或者禁用删除，那么指定它是很方便的 monitor.getItem() 。注意：您可能无法调用 monitor.canDrop() 此方法。 collect ： 可选的。收集功能。它应该返回一个普通的道具对象返回注入你的组件。它接收两个参数， monitor 和 props ，了解监视器和收集功能的介绍。请参阅下一节中详细描述的收集功能。import React, { useRef } from 'react'
import { useDrag, useDrop } from 'react-dnd'
import ItemTypes from './ItemTypes';
const style = {
padding: '0.5rem 1rem',
marginBottom: '.5rem',
backgroundColor: 'white',
cursor: 'move',
}
const TopicList = ({ id, text, index, moveCard }) => {
const ref = useRef(null)
const [, drop] = useDrop({
//定义拖拽的类型
accept: ItemTypes.TOPIC,
hover(item, monitor) {
//异常处理判断
if (!ref.current) {
return
}
//拖拽目标的Index
const dragIndex = item.index;
//放置目标Index
const hoverIndex = index;
// 如果拖拽目标和放置目标相同的话，停止执行
if (dragIndex === hoverIndex) {
return
}
//如果不做以下处理，则卡片移动到另一个卡片上就会进行交换，下方处理使得卡片能够在跨过中心线后进行交换.
//获取卡片的边框矩形
const hoverBoundingRect = ref.current.getBoundingClientRect();
//获取X轴中点
const hoverMiddleY =
(hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;
//获取拖拽目标偏移量
const clientOffset = monitor.getClientOffset();
const hoverClientY = clientOffset.y - hoverBoundingRect.top
// 从上往下放置
if (dragIndex < hoverIndex && hoverClientY < hoverMiddleY) {
return
}
// 从下往上放置
if (dragIndex > hoverIndex && hoverClientY > hoverMiddleY) {
return
}
moveCard(dragIndex, hoverIndex); //调用方法完成交换
item.index = hoverIndex; //重新赋值index，否则会出现无限交换情况
},
})
const [{ isDragging }, drag] = useDrag({
item: { type: ItemTypes.TOPIC, id, index },
collect: monitor => ({
isDragging: monitor.isDragging(),
}),
})
const opacity = isDragging ? 0 : 1
drag(drop(ref))
return (
<div ref={ref} style={{ ...style, opacity }}>
<span style={{ float: 'left' }}>{index + 1}.</span>
<div className='stem' dangerouslySetInnerHTML={{ __html: text }}></div>
</div>
)
}
export default TopicList
5.新建 ItemTypes.js
export default {
TOPIC: 'topic'
}
注意：react的版本需要是react16的新版本，否则会报如下图所示的错误，具体兼容到几，未测试，但是之前的react 16.4.2是实现不了当前功能的，所以在开发前请确认react版本
原文地址：https://blog.csdn.net/songxueing/article/details/98212026
查看更多关于react项目中使用react-dnd实现列表的拖拽排序功能的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did222381