使用react-dnd做一个拖拽排序

有些需求要求排序，拖拽排序无疑是一个很好的交互

首先引入react-dnd

import React from 'react'

import  {DragSource, DropTarget} from 'react-dnd'

效果图

使用

cosnt pic_arr = []  // 需要渲染的数组，自己定义！
...
{
 	_.map(pic_arr, (item, index) => {
       const prop = {
          move: this.moveRow,
          key: index,
          url: item.url,
          index: index
        }
        return <DropNode {...prop}/>
      })
}

对应的moveRow 方法

  moveRow = (start, end) => {
   	// start 开始移动的位置（index）， end 最后放下的位置（index）
    let {pic_arr} = this.state
    let temp = pic_arr[start]
    pic_arr[start] = pic_arr[end]
    pic_arr[end] = temp

	this.setState({
		pic_arr: [...pic_arr]
	})
  }

DropNode :
下面可以粘贴复制（懒-_-||），有兴趣的可以去看API https://react-dnd.github.io/react-dnd/

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

  render() {
    const {connectDragSource, connectDropTarget, move, ...restProps} = this.props
    return (
      connectDragSource(
        connectDropTarget(
          <div {...restProps} className="pic-item-box">
            <div key={restProps.index} style={{cursor: 'all-scroll'}}>
              <img key={restProps.index} src={restProps.url} alt=""/>
            </div>
          </div>
        )
      )
    )
  }
}

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


const DropNode = DropTarget('div', {
    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)