react+antd的Table实现拖拽排序(非antd推荐的方法)

1.使用的方式:sortablejs(缘由:我的react版本是15.的,使用antd推荐的不兼容下载的npm包,费了一些时间才找到解决办法)

ps:个人觉得比antd推荐的方法要简单很多 代码量也很少 “sortablejs”: “^1.7.0”
##DOM结构

            {return 'tableItem';}}>  //rowClassName给每一行设置一个类名

js 第一种方式 排序之后把列表进行排序 获取到排序好的列表

import Sortable from 'sortablejs';
    //拖拽初始化及逻辑
sortableGoods = (componentBackingInstance) => {
        // const { dispatch } = this.props; //不使用dva，可忽略
        let tab = document.getElementsByClassName('goodsTable');
        let el = tab[0].getElementsByClassName('ant-table-tbody')[0];
     	let self = this;//可忽略
    	let sortable = Sortable.create(el, {
            animation: 100, //动画参数
            onEnd: function (evt) { //拖拽完毕之后发生，只需关注该事件
                let menuObj = self.state.menuContent;
                let menuArr = menuObj.goods; //主菜单数组
                // Array.splice(指定修改的开始位置,要移除的个数,要添加进数组的元素)----语法
                //先把拖拽元素的位置删除 再新的位置添加进旧的元素
                const oldEl = menuArr.splice(evt.oldIndex, 1);
                menuArr.splice(evt.newIndex, 0, oldEl[0]);
                //新的
                menuObj.goods = [];//多此一举
                self.setState({
                    menuContent: menuObj
                }, () => {
                    menuObj.goods = menuArr;
                    self.setState({
                        menuContent: menuObj
                    },()=>{
                        //调用保存列表的接口
                   })
                })
            }
        });
    }

js 第二种方式 排序之后获取排序好的id组合

import Sortable from 'sortablejs';
    //拖拽初始化及逻辑
    sortableGoods = (componentBackingInstance) => {
        // const { dispatch } = this.props; //不使用dva，可忽略
        let tab = document.getElementsByClassName('goodsTable');
        let el = tab[0].getElementsByClassName('ant-table-tbody')[0];
     	let self = this;//可忽略

    	let sortable = Sortable.create(el, {
            animation: 100, //动画参数
            onEnd: function (evt) { //拖拽完毕之后发生，只需关注该事件
                let id_arr = '';
                let len = evt.from.children.length;
                const { epartmeneId } = self.state; //后台不传此参数，可忽略
                for (let i = 0; i < len; i++) {
                     id_arr += ',' + evt.from.children[i].getAttribute('data-row-key');
                 }
                id_arr = id_arr.substr(1);  //排序好的id数组
                // //根据后台人员需要发送排好序请求
                // console.log(id_arr); 
                // 不使用dva以下发送逻辑可忽略
                let doctorIds = id_arr.split(',');  //排序好的id组合字符串
              //调用保存列表的接口
              .......
    }