title: jQuery UI sortable not working properly
body: <p>My problem is somewhat strange.
  I have a droppable combined with a sortable.
  When the sortable is empty and then I drop elements in there and try to sort them, the sorting is not working properly. The placeholder often does not change the position correctly. <a href="http://jsfiddle.net/tsj5eu3m/2/" rel="nofollow">Look here.</a></p>
  
  <p>But! (and thats strange) When I populate the sortable directly in HTML the sorting works great! It's smooth and reacts correcty. <a href="http://jsfiddle.net/tsj5eu3m/3/" rel="nofollow">Look here.</a></p>
  
  <p>In both versions the LI-elements in the sortable are the same!
  I don't know what's wrong, lost already some hours on this...
  Has anybody an idea?</p>
  
  <p>Edit:</p>
  
  <p>Javascript-Code:</p>
  
  <pre><code>$(function() {
      $( "#ipk li" ).draggable({
          appendTo: "body",
          helper: "clone"
      });
      $( "#display ul" ).droppable({
          accept: ":not(.ui-sortable-helper)",
          drop: function( event, ui ) {
              $( '&lt;li&gt;&lt;/li&gt;' ).addClass('ui-state-default ui-sortable-handle').text( ui.draggable.text() ).appendTo( this );
          }
      });
      $( "#display ul" ).sortable();
      $( "#display ul" ).disableSelection();
  });
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#display { width: 800px; height: 250px; padding: 10px; border: 1px solid #ebebeb; }
  #display ul { list-style-type: none; margin: 0; padding: 0; width: 850px; height: 200px; }
  #display li { margin: 3px 3px 3px 0; padding: 1px; float: left; width: 100px; height: 90px; font-size: 25px; text-align: center; border: 1px solid #ebebeb; }
  </code></pre>
  
  <p>HTML with problems:</p>
  
  <pre><code>&lt;div id="ipk"&gt;
      &lt;h1 class="ui-widget-header"&gt;IPKs&lt;/h1&gt;
      &lt;ul&gt;
          &lt;li&gt;Apple&lt;/li&gt;
          &lt;li&gt;Orange&lt;/li&gt;
          &lt;li&gt;Banana&lt;/li&gt;
          &lt;li&gt;Onion&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  
  &lt;div id="display"&gt;
      &lt;h1 class="ui-widget-header"&gt;Display&lt;/h1&gt;
      &lt;div class="ui-widget-content"&gt;
          &lt;ul class="ui-sortable"&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>HTML without problems:</p>
  
  <pre><code>&lt;div id="ipk"&gt;
      &lt;h1 class="ui-widget-header"&gt;IPKs&lt;/h1&gt;
      &lt;ul&gt;
          &lt;li&gt;Apple&lt;/li&gt;
          &lt;li&gt;Orange&lt;/li&gt;
          &lt;li&gt;Banana&lt;/li&gt;
          &lt;li&gt;Onion&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  
  &lt;div id="display"&gt;
      &lt;h1 class="ui-widget-header"&gt;Display&lt;/h1&gt;
      &lt;div class="ui-widget-content"&gt;
          &lt;ul class="ui-sortable"&gt;
              &lt;li class="ui-state-default ui-sortable-handle"&gt;Apple&lt;/li&gt;
              &lt;li class="ui-state-default ui-sortable-handle"&gt;Orange&lt;/li&gt;
              &lt;li class="ui-state-default ui-sortable-handle"&gt;Banana&lt;/li&gt;
              &lt;li class="ui-state-default ui-sortable-handle"&gt;Onion&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>