Dragula Kanban Demo

by Sheng Huang Huang

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/dragula/3.7.2/dragula.min.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<div class="row">
  <div class="col-xs-4">
    <div class="panel panel-info">
        <div class="panel-heading">
          <h3 class="panel-title">Todo</h3>
        </div>
        <div class="panel-body">
          <div id="todo">
            &nbsp;
            <div class="alert alert-success" role="alert">Card1</div>
            <div class="alert alert-success" role="alert">Card2</div>
            <div class="alert alert-success" role="alert">Card3</div>
          </div>
        </div>
    </div>
  </div>
  <div class="col-xs-4">
    <div class="panel panel-info">
        <div class="panel-heading">
          <h3 class="panel-title">In Progress</h3>
        </div>
        <div class="panel-body">
          <div id="in-progress">
            &nbsp;
          </div>
        </div>
    </div>
  </div>
  <div class="col-xs-4">
    <div class="panel panel-info">
        <div class="panel-heading">
          <h3 class="panel-title">Done</h3>
        </div>
        <div class="panel-body">
          <div id="done">
            &nbsp;
          </div>
        </div>
    </div>
  </div>
</div>

CSS

.gu-mirror {
  position: fixed !important;
  margin: 0 !important;
  z-index: 9999 !important;
  opacity: 0.8;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
  filter: alpha(opacity=80);
  transform:skewX(-5deg);
}
.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;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
  filter: alpha(opacity=20);
}

JavaScript

$(document).ready(function(){
	dragula([
  	document.querySelector('#todo'), 
    document.querySelector('#in-progress'),
    document.querySelector('#done')
  ]);
});