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">
<div class="helper_test">Foo</div>

<ul id="drag_things">
    <li>If you drag me, I disappear</li>
    <li>I also change size, even though a size is explicitly set...</li>
    <li>This happens whether I define a custom helper, or clone.</li>
</ul>

CSS

body { background-color: #000; font: 16px Helvetica, Arial; color: #fff; }
.helper_test {
  background-color: red;
  width: 100px;
  height: 100px;
}

JavaScript

$('#drag_things').sortable({
    helper: function(a,b) { return $('.helper_test:first').clone(); }, 
    axis: 'y',
    items: 'li',
    tolerance: 'pointer'
});