muuri-util.js

/* eslint-disable no-unused-vars */
/* eslint-disable no-undef */
export default {
    options(that) {
        let thisT = this;
        const dragSortOptions = {
            action: 'swap',
            threshold: 50
        };
        return {
            dragEnabled: true,
            dragCssProps: {
                touchAction: "pan-y",
                userSelect: "",
                userDrag: "",
                tapHighlightColor: "",
                touchCallout: "",
                contentZooming: "",
            },
            dragStartPredicate: function (item, event) {
                // 拦截对应的数据不进行拖放（第一个拦截，避免空情况不能拖放回去）
                let index = (item._element.attributes[thisT.config.swapindex] || {}).value;
                if (index === '-1') return false;
                return Muuri.ItemDrag.defaultStartPredicate(item, event);
            },
            dragSortPredicate: function (item) {
                let index = (item._element.attributes[thisT.config.swapindex] || {}).value;
                if (index === '-1') return false;
                return Muuri.ItemDrag.defaultSortPredicate(item, dragSortOptions);
            },
        };
    },
    // 数据映射属性
    config: {
        pnode: '.kanban [muuri-group]',
        pgroup: 'muuri-group',
        swapsort: 'swapsort',
        swapindex: 'swapindex',
        swaptype: 'swaptype',
        swapuid: 'swapuid',
        datasort: 'sort',
        dataindex: 'index',
        datatype: 'type',
        muuriSaveData: 'muuriSaveData',
        kanbanData: 'kanbanData'
    },
    data: [],

    dragStart(thisT, that, item) {
        // 移动事件

    },
    move(thisT, that, item) {

    },
    dragReleaseEnd(thisT, that, item) {
        // 移动结束释放事件
        thisT.swaps(that);
        that[thisT.config.muuriSaveData] = thisT.convert(that[thisT.config.kanbanData], that.muuriSwap);
        // that.$forceUpdate();
    },
    events(that) {
        let thisT = this;
        //#region 事件信息
        that.muuriGrid.forEach((element, index) => {

            element.on("dragStart", function (item) { thisT.dragStart(thisT, that, item) });
            element.on("move", function (item) { thisT.move(thisT, that, item) });
            element.on("dragReleaseEnd", function (item) { thisT.dragReleaseEnd(thisT, that, item) });
        });
        //#endregion 事件信息
    },
    doItemConvert(thisT, that, indexT, itemT) {
        // _element.attributes
        let sort = (itemT._element.attributes[thisT.config.swapsort] || {}).value;
        let index = (itemT._element.attributes[thisT.config.swapindex] || {}).value;
        let uid = (itemT._element.attributes[thisT.config.swapuid] || {}).value;
        let type = (itemT._element.attributes[thisT.config.swaptype] || {}).value;
        let cindex = indexT;
        let swapT = {
            cindex,
            oindex: index,
            csort: (thisT.data[indexT] || {})[thisT.config.datasort],
            osort: sort,
            uid: uid,
            type: type
        };
        return swapT;
    },
    swaps(that) {
        let thisT = this;
        // 交换数据，用于处理数据变更
        let swapA = [];
        let indexT = 0;
        that.muuriGrid.forEach(grid => {
            grid._items.forEach((itemT) => {
                let swapT = thisT.doItemConvert(thisT, that, indexT, itemT);
                if (swapT.uid) {
                    swapA.push(swapT);
                    indexT = indexT + 1;
                }
            });
        });
        that.muuriSwap = swapA;
        //#region 组重新计算
        let groups = document.querySelectorAll(thisT.config.pnode);
        groups.forEach(pnode => {
            let type = pnode.getAttribute(thisT.config.pgroup);
            let nodes = pnode.childNodes;
            nodes.forEach(node => {
                node.setAttribute(thisT.config.swaptype, type);
                let uid = node.getAttribute(thisT.config.swapuid);
                const indexC = that.muuriSwap.findIndex(temp => temp.uid === uid);
                if (that.muuriSwap[indexC]) {
                    that.muuriSwap[indexC].type = type;
                }
            });
        });
        //#endregion
        // return swapA;
    },
    convert(ogrids = [], swaps = []) {
        // 构建转换后数据
        if (swaps.length === 0) return ogrids;
        let dataN = [];
        let thisT = this;
        swaps.forEach(element => {
            let dataO = ogrids[element.oindex];
            let dataT = { ...dataO };
            // 差异处理
            dataT[thisT.config.datasort] = element['csort'];
            dataT[thisT.config.dataindex] = element['cindex'];
            dataT[thisT.config.datatype] = element['type'];
            dataN.push(dataT);
        });
        return dataN;
    }
}

//#region ===========网格变量 start
//   kanbanData: [],// 从数据库获取
//   muuriGrid: [], // muuri html 对象
//   muuriSwap: [],  // muuri html 和 vue 数据过度对象
//   muuriSaveData: [], // 入库的数据
//#endregion ===========网格变量 end