使用react+react dnd实现一个插入排序

react+react dnd实现一个插入排序"/>

使用react+react dnd实现一个插入排序

最近公司需要做一个可视化的拖拽项目，确定的实现框架为react+react dnd，花了挺大功夫才把它实现，现在把具体实现思路以及实现步骤写出来，方便自己以后翻阅以及给大家提供一个参考

实现思路

先实现拖拽排序，然后实现拖拽增加，最后在增加的时候代理新加入的组件

实现步骤

一、实现拖拽排序

1、首先，新建一个react项目，然后引入reac dnd，指令为

npm install react-dnd react-dnd-html5-backend

yarn add react-dnd react-dnd-html5-backend

安装完毕后，就可以愉快的使用react dnd了
2、创建目录结构：

![在这里插入图片描述](.png)
这里是我临时写的，以后可以根据自己需求改变
介绍一下各个文件的作用1、index.js  项目的入口文件2、Provider.jsx  拖拽上下文，在react dnd中，只有处于拖拽上下文中的元素才可以被拖动3、Library.jsx   拖拽增加的组件，一会用到的时候详细介绍4、Box.jsx   拖拽接收的容器，用于接收拖拽组件5、Card.js   Box内部的可拖拽的每一项

3、编写拖拽上下文

import HTML5Backend from 'react-dnd-html5-backend'
import { DndProvider } from 'react-dnd'
import { Box } from './Box'
import { Card } from './Card'

定义一个变量CardList，用于遍历出每一个Card，先模拟一下数据

CardList: [{ id: 1 },{ id: 2 },{ id: 3 }]

接下来，我们创建拖拽上下文，根据CardList遍历出一组Card集合

style = {backgroundColor: "#eee",width: "100%",height: "100vh",padding: '50px 200px',boxSizing: "border-box",display: "flex",justifyContent: "space-between"}render() {const Cards = this.state.CardList.map((item, index) => {return <Card CardItem={item} index={index} key={item.id} moveCard={this.moveCard} />})return (<div style={this.style}><DndProvider backend=