Balanced Lists - Interesting - CANCEL OPTION

by bizamajig

HTML

<ul id="ul1" class="connectedSortable">
  <li class="ui-state-default">Item 1</li>
  <li class="ui-state-default">Item 2</li>
  <li class="ui-state-default">Item 3</li>
  <li class="ui-state-default">Item 4</li>
  <li class="ui-state-default">Item 5</li>
</ul>
<ul id="ul2" class="connectedSortable">
  <li class="ui-state-highlight">Item 1</li>
  <li class="ui-state-highlight">Item 2</li>
  <li class="ui-state-highlight">Item 3</li>
  <li class="ui-state-highlight">Item 4</li>
  <li class="ui-state-highlight">Item 5</li>
</ul>
<ul id="ul3" class="connectedSortable">
  <li class="ui-state-highlight">Item 1</li>
  <li class="ui-state-highlight">Item 2</li>
  <li class="ui-state-highlight">Item 3</li>
  <li class="ui-state-highlight">Item 4</li>
  <li class="ui-state-highlight">Item 5</li>
</ul>
<span id="cancel-btn">cancel</span>

CSS

.connectedSortable {
  list-style-type: none;
  margin: 0;
  padding: 0 0 2.5em;
  float: left;
  margin-right: 10px;
}
.connectedSortable li {
  font-size: 1.2em;
  margin: 0 5px 5px;
  padding: 5px;
  width: 120px;
}
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
  background: #E6E6E6;
  border: 1px solid #D3D3D3;
  color: #555555;
  font-weight: normal;
}
.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {
  background: #FBF9EE;
  border: 1px solid #FCEFA1;
  color: #363636;
}
#cancel-btn {
  padding:5px;
  background-color:red;
  cursor:pointer;
  clear:both;
  float:left;
  margin:5px;
}

JavaScript

$(function () {
  $('li').html(function(i){
    var list=$(this).parent().index()+1
    return 'L:'+list +', I:'+($(this).index()+1)
  })
  var listChange = {
    startList: null,
    item: null,
    endList: null
  }
  $(".connectedSortable").sortable({
    connectWith: ".connectedSortable",
    receive: function (event, ui) {     
      listChange = {
        startList: ui.sender,
        item: ui.item,
        endList: $(this)
      }

      balanceLists($(this), ui.sender)

    }
  }).disableSelection();

  $("#cancel-btn").click(function () {
    if (listChange.item) {
      balanceLists(listChange.startList, listChange.endList)
      $(".connectedSortable").sortable("cancel").sortable('refresh');
      listChange.item=null;
    }
  });
});


function balanceLists($from, $to) {
  $to.append($from.find('li').last())

}