Test Case Boilerplate

Fork this way...

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;
    padding: 0;
}
.sortable li {
    background-color: whitesmoke;
    margin: .1em;
    margin-bottom: 3em;
    padding: .5em;
    border: 1px solid grey;
    text-align: center;
    opacity: .75;
    box-shadow: 2px 2px 0px black;
    cursor: move;
}
.floatright li {
    float: right;
}
.floatleft li {
    float: left;
}
h2 {
    text-align: center;
}

JavaScript

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