A React component that implements drag and drop

The installation

yarn add react-sortable-hoc

use

import { SortableContainer, SortableElement } from "react-sortable-hoc";

// The container for the element to drag
const SortableItem = SortableElement(() = > (
		<div className={style.imgContent}>
                    <PictureList/>// Drag the element</div>));// The entire element sort container
const SortableList = SortableContainer(() = > {
        return <div>
                    <SortableItem
                        key={`item-The ${index} `}index={index}
                    />
        </div>
    })
 
 // Drag the sorting component
const SortableComponnet: React.FC<Props> = props= >{...return <div>
        <SortableList
            distance={5}
            axis={"xy"}
            helperClass={style.helperClass}
            onSortEnd={({ oldIndex.newIndex}) = > onPicSortEnd({ oldIndex, newIndex })}
        />
    </div>
}

export default SortableComponnet

Copy the code

The effect

Hit the pit

  • Sorted pictures cannot be dragged. Unsorted pictures fail to be dragged

  • An error occurs as soon as the page loads, unable to drag images

Error: SortableElement and SortableContainer return a component with a separate HTML container tag. Example: <div>

// The container for the element to drag
const SortableItem = SortableElement(() = > (
		<div className={style.imgContent}>// Additional div<PictureList/>// Drag the element</div>));// The entire element sort container
const SortableList = SortableContainer(() = > {
        return <div>// Additional div<SortableItem
                        key={`item-The ${index} `}index={index}
                    />
        </div>
    })
Copy the code
  • Canceled was requested after the interface was called multiple times to upload images in batches

Canceled: The page is rerendered every time a picture is uploaded successfully, causing the interface to say that dragging and uploading components outside the React.FC page function

Part of the API used

  • SortableContainer
attribute type The default value Description information
axis String y Movable range (X, Y, XY)
distance Number 0 Set to greater than 0, how long after clicking to respond to the sorting effect, before sorting, you can add other mouse events
onSortEnd Function A callback function used to drag an array of elements to reorder after a drag sort

function({oldIndex, newIndex, collection, isKeySorting}, e)
  • SortableItem
attribute type The default value Description information
index Number The key of the element
disabled Boolean false Restrict certain elements from being dragged

The official link

Github.com/clauderic/r…