首页 > 其他 > 详细

Sortable

时间:2018-12-03 15:04:36      阅读:197      评论:0      收藏:0      [点我收藏+]

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>
    }
}

 

Sortable

原文:https://www.cnblogs.com/jiujiaoyangkang/p/10058211.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!