react-sortable-hoc npm i react-sortable-hoc npm i array-move nice helper to move item in array from one place to another - array-move Sort lines Sort columns
import { sortableContainer, sortableElement, sortableHandle } from 'react-sortable-hoc'
import { arrayMoveImmutable } from 'array-move'
import { MdDragIndicator } from "react-icons/md"
const DragHandle = sortableHandle(() => (
<span className='icon-container'>
<MdDragIndicator />
<style jsx>{`
.icon-container {
display: inline-flex;
align-items: center;
cursor: move;
}
`}</style>
</span>
))
const SortableBlock = sortableElement(({value, css}) => (
<div className='line'>
<DragHandle />{value}
<style jsx>{`
.line {
display: flex;
align-items: center;
margin: 5px;
padding: 5px;
border: 1px dotted grey;
white-space: nowrap;
${css}
}
`}</style>
</div>
))
const SortableContainer = sortableContainer(({children}) => <div>{children}</div>)
function SortContainer({ css, axis }) {
const arrInit = ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5', 'Item 6']
const [state, setState] = useState(arrInit)
const onSortEnd = ({oldIndex, newIndex}) => setState(arrayMoveImmutable(state, oldIndex, newIndex))
return (
<SortableContainer onSortEnd={onSortEnd} axis={axis} useDragHandle>
{state.map((value, index) => (
<SortableBlock key={`item-${value}`} index={index} value={value} styles={css} />
))}
</SortableContainer>
)
}