React 拖拽排序

这篇文章基本骨架来自：文件点击上传和拖拽上传

今天我们要解决的问题就是页面上我们上传了多个文件，我们需要怎么实现移动拖拽排序的效果。

借用插件，先安装：

npm install --save react-sortable

参考官方文档：https://www.npmjs.com/package/react-sortable
实现效果：

拖拽排序
思路：

• 要求每个图片必须是一个单独的组件
  图片组件配置一共三步：

import React, { Component } from 'react'
// ①引包
import {sortable} from "react-sortable";
// ②装饰器语法进行组件装饰，注意这个装饰器就一个圆括号
// ③根 div 加上{...this.props}
@sortable
export default class Sortable extends Component {
    render() {
        return (
            <div className = "cur" {...this.props}>
                <img src = {this.props.base64}/>
            </div>
        )
    }
}

如果不使用@这个语法糖就得这样写：

import React, { Component } from 'react'
// ①引包
import {sortable} from "react-sortable";
// ③根 div 加上{...this.props}

class Sortable extends Component {
    render() {
        return (
            <div className = "cur" {...this.props}>
                <img src = {this.props.base64}/>
            </div>
        )
    }
}
// ②装饰器语法进行组件装饰，注意这个装饰器就一个圆括号
export default sortable(Sortable)

到这里拖拽图片的话基本就可看见拖拽效果，但是还不能看到排序的效果。

• 父组件也得三步操作，操作的地方就在子组件上

{
    this.state.base64.map((item,index) => <Sortable key = {index} base64 = {item} 
    onSortItems={(arr)=>{
        this.setState({
            base64:arr
        })
    }}
    items={this.state.base64}
    sortId={index}
    />)
}

第一个地方：给子组件一个 sortId 一般 key 用啥就给它啥
第二个地方：items 给它的值就是当前进行 map 的数组
第三个地方：一个函数，很明显是使用排序好的数组来更新当前数组

没啦配置完成。