Muuri使用心得

Muuri是一款响应式，可排序，可过滤和可拖动的网格布局的插件；

首先使用它要引用（不可以用import方法引用）：

web-animations.js||web-animation.min.js

hammer.js||hammer.min.js

muuri.js||murri.min.js

记住最后调用的js文件最先引用，引入muuri前必须先引用hammer（不然会发生hammer未定义的错误）

有些框架可能会发生引入js错误，引入muuri错误或提示Muuri未定义则删除如图两行。（murri.js）

引入hammer未定义问题需要删除如图红框内（hammer.js文件最后），注意大中小括号，以免出现语法错误。

我主要使用了他的kanban样式。

以下是kanban样式的js代码：

document.addEventListener('DOMContentLoaded', function () {

    var docElem = document.documentElement;
    var kanban = document.querySelector('.kanban-demo');
    var board = kanban.querySelector('.board');
    var itemContainers = Array.prototype.slice.call(kanban.querySelectorAll('.board-column-content'));
    var columnGrids = [];
    var dragCounter = 0;
    var boardGrid;

    itemContainers.forEach(function (container) {
        console.log(container);
    });

    itemContainers.forEach(function (container) {

        var muuri = new Muuri(container, {
            items: '.board-item',
            layoutDuration: 400,
            layoutEasing: 'ease',
            dragEnabled: true,
            dragSort: function () {
                return columnGrids;
            },
            dragSortInterval: 0,
            dragContainer: document.body,
            dragReleaseDuration: 400,
            dragReleaseEasing: 'ease'
        })
            .on('dragStart', function (item) {
                ++dragCounter;
                docElem.classList.add('dragging');
                item.getElement().style.width = item.getWidth() + 'px';
                item.getElement().style.height = item.getHeight() + 'px';
            })
            .on('dragEnd', function (item) {
                if (--dragCounter < 1) {
                    docElem.classList.remove('dragging');
                }
            })
            .on('dragReleaseEnd', function (item) {
                item.getElement().style.width = '';
                item.getElement().style.height = '';
                columnGrids.forEach(function (muuri) {
                    muuri.refreshItems();
                });
            })
            .on('layoutStart', function () {
                boardGrid.refreshItems().layout();
            });

        columnGrids.push(muuri);

    });

    boardGrid = new Muuri(board, {
        layoutDuration: 400,
        layoutEasing: 'ease',
        dragEnabled: true,
        dragSortInterval: 0,
        dragStartPredicate: {
            handle: '.board-column-header'
        },
        dragReleaseDuration: 400,
        dragReleaseEasing: 'ease'
    });

});

css代码(自己根据需求改了一些，和官网不太一样)：

 .board {
        position: relative;
        margin-left: 1%;
        margin-top: 2%;
    }
    .board-column {
        overflow:auto;
        transform: translateX(0px) translateY(0px);
        max-height: 400px;
        position: absolute;
        left: 0;
        right: 0;
        width: 30%;
        margin: 0 5%;
        background: #f0f0f0;
        border-radius: 3px;
        z-index: 1;
    }
    .board-column.muuri-item-releasing {
        z-index: 2;
    }
    .board-column.muuri-item-dragging {
        z-index: 3;
        cursor: move;
    }
    .board-column-header {
        position: relative;
        height: 50px;
        line-height: 50px;
        overflow: hidden;
        padding: 0 20px;
        text-align: center;
        background: #333;
        color: #fff;
        border-radius: 3px 3px 0 0;
    }
    @media (max-width: 600px) {
        .board-column-header {
            text-indent: -1000px;
        }
    }
    .board-column.todo .board-column-header {
        background: #4A9FF9;
    }
    .board-column.working .board-column-header {
        background: #f9944a;
    }
    .board-column.done .board-column-header {
        background: #2ac06d;
    }
    .board-column-content {
        position: relative;
        border: 10px solid transparent;
        height: 400px;
        overflow-y: auto;
    }
    .board-item {
        position: absolute;
        width: 100%;
        margin: 5px 0;
    }
    .board-item.muuri-item-releasing {
        z-index: 9998;
    }
    .board-item.muuri-item-dragging {
        z-index: 9999;
        cursor: move;
    }
    .board-item.muuri-item-hidden {
        z-index: 0;
    }
    .board-item-content {
        position: relative;
        padding: 20px;
        background: #fff;
        border-radius: 4px;
        font-size: 17px;
        cursor: pointer;
        -webkit-box-shadow: 0px 1px 3px 0 rgba(0,0,0,0.2);
        box-shadow: 0px 1px 3px 0 rgba(0,0,0,0.2);
    }
    @media (max-width: 600px) {
        .board-item-content {
            text-align: center;
        }
        .board-item-content span {
            display: none;
        }
    }