title: jQuery Sortable List Handles on Hover
body: <p>I'm creating a list with handles for sorting. I don't like the aesthetics of having 20 handles visible, so I'm trying to make the handles appear only when the mouse hovers over a list item.</p>
  
  <p>This was my first attempt:</p>
  
  <p><a href="http://jsfiddle.net/scottb/pk9ch/1/" rel="nofollow">jsFiddle #1</a></p>
  
  <p>As you can see, hovering over items in the list creates a rather jarring movement and misalignment of list items. To fix this, I've created a blank 16px image that I use to replace the handle when it's not visible. It creates a much nicer user experience than hovering, as you can see here:</p>
  
  <p><a href="http://jsfiddle.net/scottb/88BPQ/" rel="nofollow">jsFiddle #2</a></p>
  
  <pre><code>$(this).prepend("&lt;img src=http://i.imgur.com/tzGrVLc.png class=\"blank-sprite\" / width=16 height=16 border=0&gt;");
  </code></pre>
  
  <p>The problem is that during sorting the 16px image often disappears, leaving things out of alignment. (I'd post an image but I don't have the reputation.) It doesn't always happen, but seems to happen more frequently when I'm sorting very quickly.</p>
  
  <p>I'd love to know why this happens and how to fix it. Thanks!</p>