react实现拖拽排序(菜单+视频+图片等)

DOM结构部分

{/* 拖动菜单部分 */}
              <div className="configLeft" id="setSubMenu">
                    <div className="topMenuSection" ref={this.sortableSubMenu}>
                        {
                            menuList.length > 0 && menuList.map((item, i) =>
                                <Tooltip title="拖动菜单进行排序" key={i}>
                                    <div className={classNames(item.selectedStyle, "menuItem")} onClick={this.changeTab.bind(this, item)} key={i}>
                                        <span className="menuName">{item.name}</span>
                                    </div>
                                </Tooltip>

                            )
                        }
{/*添加菜单操作 */}
                        <div className="addAction" onClick={this.addMenu} style={hide}>
                            <Icon type="plus" />
                        </div>
                    </div>
          </div>

js部分

先npm i sortablejs     我的版本:"sortablejs": "^1.7.0",
import Sortable from 'sortablejs';
1.state中定义的数据
this.state = {
    menu: {
                activeIndex: '0',
                menu: [
                    {
                        id: 'menu0',
                        name: '菜单名称',
                        layout: 'double',
                        sub: {
                            activeIndex: '0',
                            menu: []
                        }
                    }
                ]
           }
}
    /**********排序子菜单************/
    sortableSubMenu = (componentBackingInstance) => {
        // check if backing instance not null
        if (componentBackingInstance) {
            let options = {
                draggable: ".menuItem", // Specifies which items inside the element should be sortable
                group: "shared",
                onEnd: (evt) => {
                  //拖动之后 触发的回调函数
                    let menuObj = this.state.menu;
                    let menuArr = menuObj.menu; //主菜单数组
                    // Array.splice(指定修改的开始位置,要移除的个数,要添加进数组的元素)----语法
                    //先把拖拽元素的位置删除 再新的位置添加进旧的元素
                    const oldEl = menuArr.splice(evt.oldIndex, 1);
                    menuArr.splice(evt.newIndex, 0, oldEl[0]);
                    //新的
                    menuObj.menu = [];//多此一举  是为了防止数据顺序发生错乱
                    this.setState({
                        menu: menuObj
                    }, () => {
                        menuObj.menu = menuArr;
                        this.setState({
                            menu: menuObj
                        }, () => {
                          //保存拖拽之后的列表  也可以不写  看业务需求
                            this.dragSortMenu(menuArr)

                        })
                    })
                }
            }
            Sortable.create(componentBackingInstance, options);
        }
    }
//保存拖拽之后的列表
    dragSortMenu(menuArr) {
        //调用保存列表的接口
    }