horizontal-kanban

Similar to a kanban board, but columns are rotated into rows/swim lanes

by Phillip

HTML

<div id="board">
  <!-- Swim lanes -->
  <div class="sortable-wrapper">
    <!-- Category Name -->
    <div class="column-1">
      <span class="category">Category 1</span>
    </div>
    <!-- Category Items -->
    <div class="sortable column-2">
      <span class="ui-state-default item-name">Item 10</span>
      <span class="ui-state-default item-name">Item 11</span>
      <span class="ui-state-default item-name">Item 12</span>
    </div>
  </div>

  <div class="sortable-wrapper">
    <!-- Category Name -->
    <div class="column-1">
      <span class="category">Category 2</span>
    </div>
    <!-- Category Items -->
    <div class="sortable column-2">
      <span class="ui-state-default item-name">Item 20</span>
      <span class="ui-state-default item-name">Item 21</span>
      <span class="ui-state-default item-name">Item 22</span>
    </div>

    <div class="sortable-wrapper">
      <!-- Category Name -->
      <div class="column-1">
        <span class="category">Category 3</span>
      </div>
      <!-- Category Items -->
      <div class="sortable column-2">
        <span class="ui-state-default item-name">Item 30</span>
        <span class="ui-state-default item-name">Item 31</span>
        <span class="ui-state-default item-name">Item 32</span>
      </div>
    </div>
  </div>
</div>

CSS

#board {
  width: 100%;
}

.sortable-wrapper {
  display: table;
  width: 100%;
  min-width: 1000px;
  min-height: 100px;
  border:1px solid black;
}
.ui-state-default {
  display: table-cell;
}

.column-1 span {
  display: table-cell;
  width: 100px;
}

.column-2 span {
  display: table-cell;
  min-width: 80px;
  margin-bottom: 5px;
  padding: 3px;
}

.category {
  padding: 5px;
  background: LightSteelBlue;
  text-align: center;
}

.item-name {
  padding: 5px;
  background: LightGoldenRodYellow;
  text-align: center;
}

.dragging {
  opacity: 0.8;
}

.drag-place-holder {
  height: 0px !important;
  margin-top: -5px;
  overflow: hidden;
  border-bottom: 2px dashed blue;
}

JavaScript

$(function() {
  $(".sortable")
    .sortable({
      revert: true,
      placeholder: "drag-place-holder",
      forcePlaceholderSize: true,
      connectWith: ".sortable",
      helper: function(event, element) {
        return $(element)
          .clone()
    },

    cursor: "move"
  })
    .disableSelection();
});