Muuri是一款响应式,可排序,可过滤和可拖动的网格布局的插件;
首先使用它要引用(不可以用import方法引用):
web-animations.js||web-animation.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;
}
}