Sortable Testing

by Ali Soltani

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<body>

  <div id="source" style="width:250px;float:left;">

    <p>A</p>
    <ul class="sortable list-A">
      <li class="ui-state-default unassigned">Albert</li>
      <li class="ui-state-default unassigned">Bob</li>
      <li class="ui-state-default unassigned">Caryn</li>
      <li class="ui-state-default unassigned">Donny</li>
      <li class="forbidden">Forbidden</li>
    </ul>
  </div>

  <div id="teams" style="width:200px;float:left;">

    <p>B</p>
    <ul class="sortable list-B">
      <li class="ui-state-default assigned">Penny</li>
      <li class="ui-state-default assigned">Mary</li>
      <li class="ui-state-default unassigned">Hank</li>
      <li class="ui-state-default unassigned">Isabelle</li>
    </ul>
  </div>
  <div style="clear:both;"></div>
</body>

CSS

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  margin-bottom: 10px;
}

li {
  margin: 5px;
  padding: 5px;
  width: 150px;
}

.sortable {
  min-height: 10px;
}

li.forbidden {
  background-color: gray;
}

JavaScript

$(function() {
  $(".list-A, .list-B").sortable({
    update: function(event, ui) {
      if ($(this).find('.forbidden').length > 0) {

        if ($('.forbidden').index() < $(this).children().length - 1)
          $('.sortable').sortable("cancel");
      }
    },
    connectWith: ".sortable",
    cancel: '.forbidden'
  }).disableSelection();
});