title: jQuery-UI: sortable() placeholder feel sticky
body: <p>I'm trying to use <code>$.sortable</code> to implement a simple puzzle:</p>
  
  <pre><code>&lt;html&gt;
    &lt;head&gt;
      &lt;link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/&gt;
      &lt;style&gt;
        span {
          display: inline-block;
          width: 1em;
          text-align: center;
          border: 1px solid;
          background: white;
          margin: 0 4px;
        }
        .vowel { color: red }
        .vowel:hover {
          cursor: pointer;
          background: red;
          color: white;
        }
        .word { padding: 5px }
        #words, #vowels{
          float: left;
          clear: both;
          padding: 5px;
          margin: 5px;
        }
        #words { border: 1px solid black }
        #vowels { border: 2px solid red }
        #vowels .placeholder {
          display: none;
        }
        .word .placeholder {
          width: 4px;
          margin: -2px;
          background: pink;
          height: 1em;
          border: none;
        }
      &lt;/style&gt;
      &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"&gt;&lt;/script&gt;
      &lt;script&gt;
        $(function(){
          $('#vowels,.word').disableSelection().sortable({
            cursor: 'pointer',
            placeholder: 'placeholder',
            cancel: '.consonant',
            connectWith: '#vowels,.word',
            helper: 'clone',
            appendTo: 'body',
            stop: function(event, ui) {
              var $uiItem = $(ui.item);
              if ($uiItem.parent().is('#vowels')) $uiItem.remove();
            }
          });
          $('#vowels').bind('sortstart', function(event, ui){
            var $uiItem = $(ui.item);
            $uiItem.clone().show().insertBefore($uiItem);
          });
        });
      &lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div id="vowels"&gt;
        &lt;span class="vowel"&gt;A&lt;/span&gt;
        &lt;span class="vowel"&gt;E&lt;/span&gt;
        &lt;span class="vowel"&gt;I&lt;/span&gt;
        &lt;span class="vowel"&gt;O&lt;/span&gt;
        &lt;span class="vowel"&gt;U&lt;/span&gt;
        &lt;span class="vowel"&gt;Y&lt;/span&gt;
      &lt;/div&gt;
      &lt;div id="words"&gt;
        &lt;div class="word"&gt;
          &lt;span class="consonant"&gt;H&lt;/span&gt;
          &lt;span class="consonant"&gt;P&lt;/span&gt;
          &lt;span class="consonant"&gt;P&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class="word"&gt;
          &lt;span class="consonant"&gt;B&lt;/span&gt;
          &lt;span class="consonant"&gt;S&lt;/span&gt;
          &lt;span class="consonant"&gt;H&lt;/span&gt;
          &lt;span class="consonant"&gt;F&lt;/span&gt;
          &lt;span class="consonant"&gt;L&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class="word"&gt;
          &lt;span class="consonant"&gt;D&lt;/span&gt;
          &lt;span class="consonant"&gt;C&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class="word"&gt;
          &lt;span class="consonant"&gt;G&lt;/span&gt;
          &lt;span class="consonant"&gt;R&lt;/span&gt;
          &lt;span class="consonant"&gt;M&lt;/span&gt;
          &lt;span class="consonant"&gt;P&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class="word"&gt;
          &lt;span class="consonant"&gt;D&lt;/span&gt;
          &lt;span class="consonant"&gt;P&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class="word"&gt;
          &lt;span class="consonant"&gt;S&lt;/span&gt;
          &lt;span class="consonant"&gt;N&lt;/span&gt;
          &lt;span class="consonant"&gt;Z&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class="word"&gt;
          &lt;span class="consonant"&gt;S&lt;/span&gt;
          &lt;span class="consonant"&gt;L&lt;/span&gt;
          &lt;span class="consonant"&gt;P&lt;/span&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>And while it works, it doesn't work quite as well as I could wish.  I can drag the letters about, but the placheholder doesn't move as smoothly as I could wish, occasionally sticking in a certain location.</p>
  
  <p>Is there anything I can do to make it move more smoothly?</p>