preface

Small make up recently met a drag and drop in business requirements: you need to drag and reorganizes the rendering paging component, the business background is due to three types of diabetes has many levels, configured the current levels of data, but want to test in the other levels, this leads to reconfigure the target levels, thus produced the drag and sort of demand.

Since the project was using a paging component in ANTD, performing drag-and-drop operations on each page item in the page required repackaging a paging component and using React-DND to do the drag-and-drop

Here is a Demo of the paging component with drag-and-drop support

implementation

Installing dependency Tools

  1. Install the react – DND

IO /react-dnd/a react-dnd/a…

npm install react-dnd react-dnd-html5-backend
Copy the code

Code implementation

1.index.js

The DndProvider component provides the react-DND function. You can use the drag and drop function of React-DND only after HTML5Backend is bound

<React.StrictMode>
    <DndProvider backend={HTML5Backend}>
      <App />
    </DndProvider>
</React.StrictMode>
Copy the code

2.dragItem

Drag (drop(ref)) enables the dragItem to be both a drag source and a drop target in the same component (sortable support) and to reorder data in the hover handler.

3.pagination

  1. The array of page numbers is evaluated using the useMemo hook function

Left ===1 and right===total to determine whether the first and last pages are rendered

  1. Bind the DROP to the DOM where the target can be placed

3. Call a method only if the drag source and drop target are inconsistent

4.App.js

1. Use panigation component

2. After the drag is complete, the data source needs to be reordered by dragging the source and placing the target position

conclusion

React-dnd is an easy way to implement this function if you need to write a page component yourself. If you need to write a page component yourself, you can use react-DND to implement this function easily.