title: jQuery UI Sortable - Strange behaviour - items falling from the top of window on move
body: <p>I'm experiencing some very strange behaviour with jQuery UI sortable.</p>
  
  <p>I'm using jQuery 1.10.2 and jQuery UI 1.10.3.</p>
  
  <p>In FF the first time you move an item, it works fine but after you have moved it once, when you move it again, it jumps and falls from the top of the window to under your cursor rather than just peeling away from it's position.</p>
  
  <p>In Chrome, this happens irrespective of if you have moved it previously.</p>
  
  <p>Here is my HTML:</p>
  
  <pre><code>&lt;ul class="trackListings" id="trackListings"&gt;
      &lt;li class="header"&gt;
          &lt;div class="number"&gt;#&lt;/div&gt;
          &lt;div class="title"&gt;Title&lt;/div&gt;
          &lt;div class="length"&gt;Length&lt;/div&gt;
          &lt;div class="plays"&gt;Plays&lt;/div&gt;
          &lt;div class="adds"&gt;Adds&lt;/div&gt;
          &lt;div class="toggle"&gt;&lt;/div&gt;
      &lt;/li&gt;
      &lt;li id="369"&gt;
          &lt;div class="number"&gt;1&lt;/div&gt;
          &lt;div class="title"&gt;Test track&lt;/div&gt;
          &lt;div class="length"&gt;1:25&lt;/div&gt;
          &lt;div class="plays"&gt;0&lt;/div&gt;
          &lt;div class="adds"&gt;0&lt;/div&gt;
          &lt;div class="toggle"&gt;&lt;span&gt;&amp;gt;&lt;/span&gt;&lt;/div&gt;
          &lt;div class="actions"&gt;Purchase Link: &lt;input placeholder="e.g iTunes, Amazon etc" value="" type="text"&gt;&lt;/div&gt;
      &lt;/li&gt;
  
      &lt;li id="370"&gt;
          &lt;div class="number"&gt;2&lt;/div&gt;
          &lt;div class="title"&gt;Test track 2&lt;/div&gt;
          &lt;div class="length"&gt;1:29&lt;/div&gt;
          &lt;div class="plays"&gt;0&lt;/div&gt;
          &lt;div class="adds"&gt;0&lt;/div&gt;
          &lt;div class="toggle"&gt;&lt;span&gt;&amp;gt;&lt;/span&gt;&lt;/div&gt;
          &lt;div class="actions"&gt;Purchase Link: &lt;input placeholder="e.g iTunes, Amazon etc" value="" type="text"&gt;&lt;/div&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Appropriate CSS:</p>
  
  <pre><code>.trackListings{
      padding:0;
  
  }
  .trackListings li{
      line-height: 50px;
      display: inline;
      display: block;
      border-bottom: 1px solid #afb2b4;
      position: relative;
      font-size: 21px;
      color: #000;
      transition:.25s linear all;
  }
  
  .trackListings li:after{
      clear: both;
      display: block;
      content: " ";
  }
  .trackListings li div{
      float: left;
  }
  .trackListings li div.number{
      text-align: center;
      width: 45px;
  }
  
  .trackListings li div.title{
      width: 465px;
      padding-left: 20px;
  }
  
  .trackListings li div.length{
      width: 110px;
  }
  
  .trackListings li div.plays{
      width: 100px;
  }
  
  .trackListings li div.adds{
      width: 210px;
  }
  
  .trackListings li div.toggle span{
      font-size: 30px; 
      display: block;
  }
  
  .trackListings li.active div.toggle span{
      color: #e35b29;
  }
  .trackListings li div.actions{
      display: none;
  }
  </code></pre>
  
  <p>And am initialising it like so:</p>
  
  <pre><code>$('#trackListings').sortable({
                  items: 'li:not(.header)'
              });
  </code></pre>
  
  <p>I've tried removing the containing divs and setting a fixed height on the lis. Also have tried wrapping in a relatively positioned div but this caused it to happen every time in FF too.</p>