拖拽排序

csdn — antd-vue a-tree任意节点拖拽排序方法，最小粒度变更受影响的记录（通用排序） — 小狐狸和小兔子 csdn — Antd 树拖拽一些细节，官网没有，摸坑篇 — 没事下辈子小心点 csdn — ant tree拖动排序 实现同级拖动 和 跨级拖动 — big_dragon 博客园 — react 拖拽组件 自由拖拽,垂直水平拖拽 — 阿政想暴富

    onDrop1 = async info => {
        // const dropPosition = info.dropPosition - Number(dropPos[dropPos.length - 1]);
        console.log(info, 'info');
        const nodeType = this.queryTreeNodeType(info);
        const childrenNum = this.queryTreeNodeChildrenNum(info);
        const dragKey = info.dragNode.key; // 拖动目标  id
        const params = {
            ids: [],
            classifyType: '',
            id: '',
            parentId: ''
        };
        // this.queryTreeNodeChildrenNum(info);
        const data = this.findInsertionPosition(info);
        const idList = this.getIdList(data.location, data.fatherId, dragKey);
 
        if (nodeType == 'father' && childrenNum > 0 && info.dropPosition != -1 && data.fatherId != 1) {
            return noticeStore.setLastError({effect: 1, tip: '该分类下有子类，无法移动至子分类。如需移动请先转移子类后重试。'});
        }
        params.ids = idList.join(',');
        params.id = dragKey;
        params.classifyType = 0;
        params.parentId = data.fatherId;
        await talkLibraryStore.updateSortClassify(params);
        console.log(params, 'params');
        await talkLibraryStore.getVerbalTrickListTree({a: 1});
        // const idList = this.findIds(dropKeyParentId, dragKey, dropKey, nodeType, info.dropToGap);
    };
    getIdList = (_location, fatherId, dragKey) => {
        const data = toJS(talkLibraryStore.CompanyTree?.children) || [];
        const results = [];
        data.forEach(e => {
            if (e.id == -1) return;
            if (e.id == dragKey) return;
            if (fatherId == 1) {
                results.push(e.id);
            }
            if (fatherId == e.id) {
                e.children.forEach(el => {
                    // eslint-disable-next-line no-useless-return
                    if (el.id == dragKey) return;
                    results.push(el.id);
                });
            }
        });
        if (_location == '第一') {
            results.splice(0, 0, dragKey);
        } else {
            const _locationIndex = results.findIndex(e => e == _location) + 1;
            results.splice(_locationIndex, 0, dragKey);
        }
        if (fatherId == 1) {
            return [-1, ...results];
        } else {
            return results;
        }
    };
    findInsertionPosition = info => {
        const dropKey = info.node.key; //拖动目标防放在哪一个节点后面
        const dropKeyParentId = info.node.parentId; //拖动目标防放在哪一个节点后面 的哪个节点的父id
        const dropPosNum = info.node.pos.split('-').length; //2 上一个节点是一级 3 上一个节点是二级
        const dropToGap = info.dropToGap;
        let fatherId; //父节点
        let location; //放置在哪个节点后面
        // .dropToGap为true,说明只是同级或者跨级排序，只需要寻找目标节点的父ID，获取其对象以及所有的子节点，并为子节点设置当前对象的ID为父ID即可
        // .dropToGap为false,说明拖拽节点成为了目标节点的子节点，只需要获取目标节点对象即可
        if (dropToGap) {
            fatherId = 1;
            if (dropPosNum == 2) location = dropKey;
            if (dropPosNum == 3) location = dropKeyParentId;
            if (info.dropPosition == -1) location = '第一';
        } else {
            if (dropPosNum == 2) fatherId = dropKey;
            if (dropPosNum == 3) fatherId = dropKeyParentId;
            if (dropPosNum == 2) location = '第一';
            if (dropPosNum == 3) location = dropKey;
        }
        return {location, fatherId};
    };
    queryTreeNodeType = info => {
        const nodeType = info.dragNode.parentId == 1 ? 'father' : 'son';
        return nodeType;
    };
    queryTreeNodeChildrenNum = info => {
        const results = info.dragNode.children.length;
        return results;
    };