码迷,mamicode.com
首页 > 其他好文 > 详细

Sortable

时间:2018-12-03 15:29:06      阅读:148      评论:0      收藏:0      [点我收藏+]

标签:ble   react   数组   idm   get   items   item   document   his   

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

标签:ble   react   数组   idm   get   items   item   document   his   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!