Iron Man Day 19 - Dragula

by Sheng Huang Huang

HTML

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

CSS

.gu-mirror {
  filter: alpha(opacity=80);
  transform:skewX(-5deg) skewY(5deg);
}

.kanban-card {
  cursor: pointer;
}

body {
  margin: 10px;
}

JavaScript

var dragulaCards = dragula([
  document.querySelector('#todo'),
  document.querySelector('#in-progress'),
  document.querySelector('#done')
]);

dragulaCards.on('drop', function(el, target, source, sibling){
	console.log(source); // from
  console.log(target); // to
  console.log(sibling); // next card
});

var dragulaKanban = dragula([
  document.querySelector('#kanban')
], {
  moves: function(el, container, handle) {
    return handle.classList.contains('panel-title');
  }
});