title: jQuery append wrong position
body: <p>I'm trying to order elements from one list into two lists. However, when I drop the element and append it to the target div, the position is very strange (almost random). </p>
  
  <pre><code>&lt;div class='container'&gt;// contains generated words, draggable
    &lt;div class='word'&gt;Word&lt;/div&gt;
    &lt;div class='word'&gt;Word 2&lt;/div&gt;
    ...
  &lt;/div&gt; 
  &lt;div class='target' id='target1'&gt;&lt;/div&gt; // made droppable
  &lt;div class='target' id='target2'&gt;&lt;/div&gt; // made droppable
  </code></pre>
  
  <p>The drop function:</p>
  
  <pre><code>$('.target').droppable({drop: function(e,ui) {
    $(this).append(ui.draggable);
  }});
  </code></pre>
  
  <p>The following fiddle shows the problem with one target.</p>
  
  <p><a href="http://jsfiddle.net/YZ8vJ/12/" rel="nofollow">http://jsfiddle.net/YZ8vJ/12/</a></p>
  
  <p>I'm clueless why this is happening, and I haven't found an answer on SO or on the internet...</p>