title: jQuery sortable item height
body: <p>I've got a simple jQuery sortable based on a list as follows:</p>
  
  <pre><code>&lt;ul&gt;
    &lt;li&gt;Item 1&lt;/li&gt;
    &lt;li&gt;Item 2&lt;/li&gt;
    &lt;li&gt;Item 3&lt;/li&gt;
    &lt;li&gt;Item 4&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>I've created a helper function so that regardless of what the contents of an item may be, the helper is always the same fixed size.</p>
  
  <p>My problem is that if I drag an item that has a lot of content (says several paragraphs of text), even though my helper is only a single line in height, the item will not drop onto the item below until it has travelled at least the original height of my item.</p>
  
  <p>For example:</p>
  
  <pre><code>&lt;ul&gt;
    &lt;li&gt;Item 1
    line2
    line3
    line4
    line5
    &lt;/li&gt;
    &lt;li&gt;Item 2&lt;/li&gt;
    &lt;li&gt;Item 3&lt;/li&gt;
    &lt;li&gt;Item 4&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>If I drag item1 my helper turns this into a single line - nice and easy to drag. However, I still need to move the mouse 5 lines down the screen before item1 can be dropped between item2 and item3. Once I do drag it sufficient height the item then seems to function as I would expect, and I no longer need to drag it the original height.</p>
  
  <p>I've tried all of the sortable options I can think of but to no avail and am hoping that someone has a suggestion.</p>
  
  <pre><code>$( '#sortable' ).sortable( {
    placeholder: 'highlight',
    axis: 'y',
    helper: function( event ) {
     return $( this ).find( '.drag' ).clone();
   },
  });
  </code></pre>