Test Case Boilerplate

Fork this way...

by TJ VanToll

HTML

<script src="http://code.jquery.com/ui/jquery-ui-git.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/jquery-ui-git.css">
<h2>float right (broken)</h2>
<ul class="sortable floatright"> 
  <li id="id1"> 1 </li> 
  <li id="id2"> 2 </li> 
  <li id="id3"> 3 </li> 
  <li id="id4"> 4 </li> 
  <li id="id5"> 5 </li> 
</ul>
<br style="clear: both;" />
<hr />
<h2>float left (correct)</h2>
<ul class="sortable floatleft"> 
  <li id="id1"> 1 </li> 
  <li id="id2"> 2 </li> 
  <li id="id3"> 3 </li> 
  <li id="id4"> 4 </li> 
  <li id="id5"> 5 </li> 
</ul>
<br style="clear: both;" />

CSS

.sortable {
    list-style: none;
}
.sortable li {
    padding: 1em;
    border: 1px solid grey;
}
.floatright li {
    float: right;
}
.floatleft li {
    float: left;
}

JavaScript

$( ".sortable" ).sortable();