This kanban drag and drop layout is inspired by Invision, Trello, Google Keep, and @aaronstump.
Created
May 7, 2019 07:50
-
-
Save StephenBrown/2a493ba595ae46e24af80ea6f30606df to your computer and use it in GitHub Desktop.
Kanban Drag and Drop
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <section class="section"> | |
| <h1>Kanban Drag and Drop Interface Layout</h1> | |
| <h4>Inspired by <a href="https://trello.com/ | |
| ">Trello</a>, and <a href="https://www.google.com/keep/">Google Keep</a>, <a href="http://blog.invisionapp.com/design-project-management-tool/">Invision</a> and <a href="https://twitter.com/aaronstump">@aaronstump</a></h4> | |
| </section> | |
| <div class="drag-container"> | |
| <ul class="drag-list"> | |
| <li class="drag-column drag-column-on-hold"> | |
| <span class="drag-column-header"> | |
| <h2>On Hold</h2> | |
| <svg class="drag-header-more" data-target="options1" fill="#FFFFFF" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/</svg> | |
| </span> | |
| <div class="drag-options" id="options1"></div> | |
| <ul class="drag-inner-list" id="1"> | |
| <li class="drag-item"></li> | |
| <li class="drag-item"></li> | |
| </ul> | |
| </li> | |
| <li class="drag-column drag-column-in-progress"> | |
| <span class="drag-column-header"> | |
| <h2>In Progress</h2> | |
| <svg class="drag-header-more" data-target="options2" fill="#FFFFFF" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/</svg> | |
| </span> | |
| <div class="drag-options" id="options2"></div> | |
| <ul class="drag-inner-list" id="2"> | |
| <li class="drag-item"></li> | |
| <li class="drag-item"></li> | |
| <li class="drag-item"></li> | |
| </ul> | |
| </li> | |
| <li class="drag-column drag-column-needs-review"> | |
| <span class="drag-column-header"> | |
| <h2>Needs Review</h2> | |
| <svg data-target="options3" class="drag-header-more" fill="#FFFFFF" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/</svg> | |
| </span> | |
| <div class="drag-options" id="options3"></div> | |
| <ul class="drag-inner-list" id="3"> | |
| <li class="drag-item"></li> | |
| <li class="drag-item"></li> | |
| <li class="drag-item"></li> | |
| <li class="drag-item"></li> | |
| </ul> | |
| </li> | |
| <li class="drag-column drag-column-approved"> | |
| <span class="drag-column-header"> | |
| <h2>Approved</h2> | |
| <svg data-target="options4" class="drag-header-more" fill="#FFFFFF" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/</svg> | |
| </span> | |
| <div class="drag-options" id="options4"></div> | |
| <ul class="drag-inner-list" id="4"> | |
| <li class="drag-item"></li> | |
| <li class="drag-item"></li> | |
| </ul> | |
| </li> | |
| </ul> | |
| </div> | |
| <section class="section"> | |
| <a href="https://github.com/bevacqua/dragula">Drag and drop functionality by <strong>bevacqua/dragula</strong></a> | |
| </section> | |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| dragula([ | |
| document.getElementById('1'), | |
| document.getElementById('2'), | |
| document.getElementById('3'), | |
| document.getElementById('4'), | |
| document.getElementById('5') | |
| ]) | |
| .on('drag', function(el) { | |
| // add 'is-moving' class to element being dragged | |
| el.classList.add('is-moving'); | |
| }) | |
| .on('dragend', function(el) { | |
| // remove 'is-moving' class from element after dragging has stopped | |
| el.classList.remove('is-moving'); | |
| // add the 'is-moved' class for 600ms then remove it | |
| window.setTimeout(function() { | |
| el.classList.add('is-moved'); | |
| window.setTimeout(function() { | |
| el.classList.remove('is-moved'); | |
| }, 600); | |
| }, 100); | |
| }); | |
| var createOptions = (function() { | |
| var dragOptions = document.querySelectorAll('.drag-options'); | |
| // these strings are used for the checkbox labels | |
| var options = ['Research', 'Strategy', 'Inspiration', 'Execution']; | |
| // create the checkbox and labels here, just to keep the html clean. append the <label> to '.drag-options' | |
| function create() { | |
| for (var i = 0; i < dragOptions.length; i++) { | |
| options.forEach(function(item) { | |
| var checkbox = document.createElement('input'); | |
| var label = document.createElement('label'); | |
| var span = document.createElement('span'); | |
| checkbox.setAttribute('type', 'checkbox'); | |
| span.innerHTML = item; | |
| label.appendChild(span); | |
| label.insertBefore(checkbox, label.firstChild); | |
| label.classList.add('drag-options-label'); | |
| dragOptions[i].appendChild(label); | |
| }); | |
| } | |
| } | |
| return { | |
| create: create | |
| } | |
| }()); | |
| var showOptions = (function () { | |
| // the 3 dot icon | |
| var more = document.querySelectorAll('.drag-header-more'); | |
| function show() { | |
| // show 'drag-options' div when the more icon is clicked | |
| var target = this.getAttribute('data-target'); | |
| var options = document.getElementById(target); | |
| options.classList.toggle('active'); | |
| } | |
| function init() { | |
| for (i = 0; i < more.length; i++) { | |
| more[i].addEventListener('click', show, false); | |
| } | |
| } | |
| return { | |
| init: init | |
| } | |
| }()); | |
| createOptions.create(); | |
| showOptions.init(); | |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/45226/dragula.min.js"></script> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $ease-out: all .3s cubic-bezier(0.23, 1, 0.32, 1); | |
| $on-hold: #FB7D44; | |
| $in-progress: #2A92BF; | |
| $needs-review: #F4CE46; | |
| $approved: #00B961; | |
| * { | |
| box-sizing: border-box; | |
| } | |
| body { | |
| background: #33363D; | |
| color: white; | |
| font-family: 'Lato'; | |
| font-weight: 300; | |
| line-height: 1.5; | |
| -webkit-font-smoothing: antialiased; | |
| } | |
| ul { | |
| list-style-type: none; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| .drag-container { | |
| max-width: 1000px; | |
| margin: 20px auto; | |
| } | |
| .drag-list { | |
| display: flex; | |
| align-items: flex-start; | |
| @media (max-width: 690px) { | |
| display: block; | |
| } | |
| } | |
| .drag-column { | |
| flex: 1; | |
| margin: 0 10px; | |
| position: relative; | |
| background: rgba(black, 0.2); | |
| overflow: hidden; | |
| @media (max-width: 690px) { | |
| margin-bottom: 30px; | |
| } | |
| h2 { | |
| font-size: 0.8rem; | |
| margin: 0; | |
| text-transform: uppercase; | |
| font-weight: 600; | |
| } | |
| &-on-hold { | |
| .drag-column-header, | |
| .is-moved, | |
| .drag-options { | |
| background: $on-hold; | |
| } | |
| } | |
| &-in-progress { | |
| .drag-column-header, | |
| .is-moved, | |
| .drag-options { | |
| background: $in-progress; | |
| } | |
| } | |
| &-needs-review { | |
| .drag-column-header, | |
| .is-moved, | |
| .drag-options{ | |
| background: $needs-review; | |
| } | |
| } | |
| &-approved { | |
| .drag-column-header, | |
| .is-moved, | |
| .drag-options { | |
| background: $approved; | |
| } | |
| } | |
| } | |
| .drag-column-header { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| padding: 10px; | |
| } | |
| .drag-inner-list { | |
| min-height: 50px; | |
| } | |
| .drag-item { | |
| margin: 10px; | |
| height: 100px; | |
| background: rgba(black, 0.4); | |
| transition: $ease-out; | |
| &.is-moving { | |
| transform: scale(1.5); | |
| background: rgba(black, 0.8); | |
| } | |
| } | |
| .drag-header-more { | |
| cursor: pointer; | |
| } | |
| .drag-options { | |
| position: absolute; | |
| top: 44px; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| padding: 10px; | |
| transform: translateX(100%); | |
| opacity: 0; | |
| transition: $ease-out; | |
| &.active { | |
| transform: translateX(0); | |
| opacity: 1; | |
| } | |
| &-label { | |
| display: block; | |
| margin: 0 0 5px 0; | |
| input { | |
| opacity: 0.6; | |
| } | |
| span { | |
| display: inline-block; | |
| font-size: 0.9rem; | |
| font-weight: 400; | |
| margin-left: 5px; | |
| } | |
| } | |
| } | |
| /* Dragula CSS */ | |
| .gu-mirror { | |
| position: fixed !important; | |
| margin: 0 !important; | |
| z-index: 9999 !important; | |
| opacity: 0.8; | |
| list-style-type: none; | |
| } | |
| .gu-hide { | |
| display: none !important; | |
| } | |
| .gu-unselectable { | |
| -webkit-user-select: none !important; | |
| -moz-user-select: none !important; | |
| -ms-user-select: none !important; | |
| user-select: none !important; | |
| } | |
| .gu-transit { | |
| opacity: 0.2; | |
| } | |
| /* Demo info */ | |
| .section { | |
| padding: 20px; | |
| text-align: center; | |
| a { | |
| color: white; | |
| text-decoration: none; | |
| font-weight: 300; | |
| } | |
| h4 { | |
| font-weight: 400; | |
| a { | |
| font-weight: 600; | |
| } | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment