Muuri Is a responsive, sortable, filterable and draggable grid layout plug-in;

First use it to reference (not import method):

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

hammer.js||hammer.min.js

muuri.js||murri.min.js

Remember that the last called js file is the first to be referenced. You must refer to hammer before you introduce muuri (otherwise hammer undefined errors).

Some frameworks may introduce JS errors. If you introduce a muuri error or prompt that muuri is not defined, delete the lines as shown in Figure 2. (murri.js)

To introduce the undefined problem of hammer, you need to delete the red box as shown in the figure (at the end of hammer.js file), and pay attention to the braces to avoid syntax errors.

I mainly used his kanban style.

Here is the kanban style js code:

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 code (I changed it according to my needs, which is different from the official website):

 .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;
        }
    }