swim-lane

sortable items in a swim lane

by Shrikrishna Gupta

HTML

<div class="swim-lane-wrapper">

  <!-- Row One -->
  <div class="swim-lane">  
    <div class="category-box">"Category 1"</div>
    <div class="sortable">
      <div class="item-box">"Wrap this long string of text please!"</div>
      <div class="item-box">"Wrap this long string of text please!"</div>
      <div class="item-box">"Wrap this long string of text please!"</div>
    </div>
  </div>

  <!-- Row Two -->
  <div class="swim-lane">
    <div class="category-box">"Category 2"</div>
    <div class="sortable">
      <div class="item-box">"Wrap this long string of text please!"</div>
      <div class="item-box">"Wrap this long string of text please!"</div>
      <div class="item-box">"Wrap this long string of text please!"</div>
    </div>
  </div>

</div>

CSS

.swim-lane {
  display: inline-block;
  white-space: nowrap;
  float: left;
  width: 90%;
  height: 100px;
  border: 1px solid red;
}

.category-box {
  display: inline-block;
  white-space: nowrap;
  float: left;
  background-color: #FFF3CC;
  border: #DFBC6A 1px solid;
  width: 75px;
  height: 50px;
  margin: 5px;
  padding: 10px;
  font-size: 12px;
  white-space: normal;
  text-align: center;
  box-shadow: 2px 2px 2px #999;
  cursor: move;
}

.item-box {
  display: inline-block;
  background-color: #edf3ff;
  border: #6d71db 1px solid;
  width: 75px;
  height: 50px;
  margin: 5px;
  padding: 10px;
  font-size: 12px;
  white-space: normal;
  text-align: center;
  box-shadow: 2px 2px 2px #999;
  cursor: move;
}

JavaScript

$(function() {
  $(".swim-lane-wrapper")
    .sortable({
    axis: "Y",
    handle: ".category-box",
    connectWith: ".swim-lane-wrapper",
  })
    .disableSelection();
});

$(function() {
  $(".sortable")
    .sortable({
    connectWith: ".sortable",
  })
    .disableSelection();
});