3sort

by edwardsharp

HTML

<ul id="sortable1">
  <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="sortable2">
  <li class="ui-state-highlight">Item A</li>
  <li class="ui-state-highlight">Item B</li>
  <li class="ui-state-highlight">Item C</li>
</ul>

<ul id="sortable3" class="droptrue">
  <li class="ui-state-highlight">Item 31</li>
  <li class="ui-state-highlight">Item 32</li>
  <li class="ui-state-highlight">Item 33</li>
</ul>

<br style="clear:both">

CSS

#sortable1,
#sortable2,
#sortable3 {
  list-style-type: none;
  margin: 0;
  float: left;
  margin-right: 10px;
  background: #eee;
  padding: 5px;
  width: 143px;
}

#sortable1 li,
#sortable2 li,
#sortable3 li {
  margin: 5px;
  padding: 5px;
  font-size: 1.2em;
  width: 120px;
}

JavaScript

$(function() {
  $("ul#sortable1").sortable({

  });

  $("ul#sortable2").sortable({

  });

  $("ul#sortable3").sortable({

  });
  $("#sortable1, #sortable2, #sortable3").disableSelection();
});