Kanban Drag and Drop

index.html

<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>

kanban-drag-and-drop.markdown

Kanban Drag and Drop

This kanban drag and drop layout is inspired by Invision, Trello, Google Keep, and @aaronstump.

A Pen by Ettrics on CodePen.

License.

script.js

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();

scripts

<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/45226/dragula.min.js"></script>

style.scss

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