Sortable

Posted 2021-01-24 jiujiaoyangkang

d_(:з」∠)_

import React, {Component} from ‘react‘;
import "./app.css";

import Sortable from ‘sortablejs‘;

export default class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            arr: [‘a‘, ‘b‘, ‘c‘, ‘d‘, ‘e‘]
        };
    }
    componentDidMount() {
        let oItems = document.getElementById("items");
        let sortable = Sortable.create(oItems, {
            onEnd: (evt) => {
                let arr = this.state.arr;
                // splice 先改变之前的数组，再把替换的那些个元素作为新的数组返回
                arr[evt.oldIndex] = arr.splice(evt.newIndex, 1, arr[evt.oldIndex])[0];
                this.setState({ arr }, () => console.log(arr));
            }
        });
    }
    render() {
        return <ul id="items">
            <li>a</li>
            <li>b</li>
            <li>c</li>
            <li>d</li>
            <li>e</li>
        </ul>
    }
}