Skip to content

Instantly share code, notes, and snippets.

@NSAKGBM16CIA
Created March 7, 2023 22:36
Show Gist options
  • Save NSAKGBM16CIA/a770abd699d89c9acb7dbbd760b30e27 to your computer and use it in GitHub Desktop.
Save NSAKGBM16CIA/a770abd699d89c9acb7dbbd760b30e27 to your computer and use it in GitHub Desktop.
Muuri: simple kanban (with scrolling containers)
<div class="drag-container"></div>
<div class="board">
<div class="board-column todo">
<div class="board-column-container">
<div class="board-column-header">Todo</div>
<div class="board-column-content-wrapper">
<div class="board-column-content">
<div class="board-item"><div class="board-item-content"><span>Item #</span>1</div></div>
<div class="board-item"><div class="board-item-content"><span>Item #</span>2</div></div>
<div class="board-item"><div class="board-item-content"><span>Item #</span>3</div></div>
<div class="board-item"><div class="board-item-content"><span>Item #</span>4</div></div>
<div class="board-item"><div class="board-item-content"><span>Item #</span>5</div></div>
</div>
</div>
</div>
</div>
<div class="board-column working">
<div class="board-column-container">
<div class="board-column-header">Working</div>
<div class="board-column-content-wrapper">
<div class="board-column-content">
<div class="board-item"><div class="board-item-content"><span>Item #</span>6</div></div>
<div class="board-item"><div class="board-item-content"><span>Item #</span>7</div></div>
<div class="board-item"><div class="board-item-content"><span>Item #</span>8</div></div>
<div class="board-item"><div class="board-item-content"><span>Item #</span>9</div></div>
<div class="board-item"><div class="board-item-content"><span>Item #</span>10</div></div>
</div>
</div>
</div>
</div>
<div class="board-column done">
<div class="board-column-container">
<div class="board-column-header">Done</div>
<div class="board-column-content-wrapper">
<div class="board-column-content">
<div class="board-item"><div class="board-item-content"><span>Item #</span>11</div></div>
<div class="board-item"><div class="board-item-content"><span>Item #</span>12</div></div>
<div class="board-item"><div class="board-item-content"><span>Item #</span>13</div></div>
<div class="board-item"><div class="board-item-content"><span>Item #</span>14</div></div>
<div class="board-item"><div class="board-item-content"><span>Item #</span>15</div></div>
</div>
</div>
</div>
</div>
</div>
var dragContainer = document.querySelector('.drag-container');
var itemContainers = [].slice.call(document.querySelectorAll('.board-column-content'));
var columnGrids = [];
var boardGrid;
// Init the column grids so we can drag those items around.
itemContainers.forEach(function (container) {
var grid = new Muuri(container, {
items: '.board-item',
dragEnabled: true,
dragSort: function () {
return columnGrids;
},
dragContainer: dragContainer,
dragAutoScroll: {
targets: (item) => {
return [
{ element: window, priority: 0 },
{ element: item.getGrid().getElement().parentNode, priority: 1 },
];
}
},
})
.on('dragInit', function (item) {
item.getElement().style.width = item.getWidth() + 'px';
item.getElement().style.height = item.getHeight() + 'px';
})
.on('dragReleaseEnd', function (item) {
item.getElement().style.width = '';
item.getElement().style.height = '';
item.getGrid().refreshItems([item]);
})
.on('layoutStart', function () {
boardGrid.refreshItems().layout();
});
columnGrids.push(grid);
});
// Init board grid so we can drag those columns around.
boardGrid = new Muuri('.board', {
dragEnabled: true,
dragHandle: '.board-column-header'
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/web-animations/2.3.2/web-animations.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/haltu/muuri@0.9.5/dist/muuri.min.js"></script>
* {
box-sizing: border-box;
}
html, body {
position: relative;
width: 100%;
height: 100%;
font-family: Helvetica, Arial, sans-serif;
}
body {
margin: 0;
padding: 20px 10px;
}
.drag-container {
position: fixed;
left: 0;
top: 0;
z-index: 1000;
}
.board {
position: relative;
}
.board-column {
position: absolute;
left: 0;
top: 0;
padding: 0 10px;
width: calc(100% / 3);
z-index: 1;
}
.board-column.muuri-item-releasing {
z-index: 2;
}
.board-column.muuri-item-dragging {
z-index: 3;
cursor: move;
}
.board-column-container {
position: relative;
width: 100%;
height: 100%;
}
.board-column-header {
position: relative;
height: 50px;
line-height: 50px;
overflow: hidden;
padding: 0 20px;
text-align: center;
background: #333;
color: #fff;
border-radius: 5px 5px 0 0;
font-weight: bold;
letter-spacing: 0.5px;
text-transform: uppercase;
}
@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-wrapper {
position: relative;
padding: 8px;
background: #f0f0f0;
height: calc(100vh - 90px);
overflow-y: auto;
border-radius: 0 0 5px 5px;
}
.board-column-content {
position: relative;
min-height: 100%;
}
.board-item {
position: absolute;
width: calc(100% - 16px);
margin: 8px;
}
.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;
}
}
@NSAKGBM16CIA
Copy link
Author

drag and drop cards

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment