Sortable Testing

by Melvin Stanly

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">
          <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">
          <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() {
    $( ".sortable" ).sortable({
        connectWith : ".sortable",
        items:'li:not(.forbidden)',
    }).disableSelection();
  });