React-dnd实现拖拽，最简单代码，直接可以跑

不多说，直接上代码

react-dnd 需要react版本 > 16.6 ,貌似与react.memo方法有关

import React from 'react'
// DragDropContext 类似React的Context
// DragSource 高阶组件 包裹被拖的元素
// DropTarget 高阶组件 包裹被释放的元素 
import {DragDropContext, DragSource, DropTarget} from 'react-dnd';
// HTML5Backend  这个库是必须的，类似于React的合成事件
// 解决浏览器差异，抽象事件操作为可以处理的state
import HTML5Backend from 'react-dnd-html5-backend';
import "./index.css"

const data = [
  {id: 10, text: '1'},
  {id: 11, text: '2'},
  {id: 12, text: '3'},
  {id: 13, text: '4'},
  {id: 14, text: '5'}
]

const datas = {
  data
}

class Item extends React.Component {
  constructor(props) {
    super(props)
  }

  render() {
    const {connectDragSource, connectDropTarget, move, ...restProps} = this.props;
    return (
      connectDragSource(
        connectDropTarget(
          <div {...restProps}>{restProps.text}</div>
        )
      )
    )
  }
}


const dragNode = DragSource('li', {
  beginDrag(props, monitor, component) {
    return {
      index: props.index,
    };
  },
}, connect => ({
  connectDragSource: connect.dragSource(),
}))(Item);


const DropNode = DropTarget('li', {
    drop(props, monitor) {
      const dragIndex = monitor.getItem().index;
      const hoverIndex = props.index;
      if (dragIndex === hoverIndex) return;
      props.move(dragIndex, hoverIndex);
      //monitor.getItem().index = hoverIndex;
    }
  }, function (connect) {
    return {
      connectDropTarget: connect.dropTarget()
    }
  }
)(dragNode)


class Demo extends React.Component {
  state = datas;

  moveRow = (start, end) => {
    let {data} = this.state;
    let temp = data[start]
    data[start] = data[end];
    data[end] = temp;
    this.setState({data})
  }

  render() {

    return (
      <div className='move'>
        {
          this.state.data.map( (item, index) => {

            const prop = {
              move: this.moveRow,
              key: item.id,
              id: item.id,
              text: item.text,
              index: index
            }
            return <DropNode {...prop}/>

          })
        }
      </div>
    )
  }
}

export default DragDropContext(HTML5Backend)(Demo);