title: jquery ui sortable doesn't scroll in IE when placed in a scrollable div
body: <p>checkout this fiddle: <a href="http://jsfiddle.net/MSygf/3/" rel="nofollow">http://jsfiddle.net/MSygf/3/</a> in Internet Explorer</p>
  
  <pre><code>&lt;div style="overflow-y:auto;max-height:100px;"&gt;
  &lt;ul class="draggable"&gt;
      &lt;li class="drag"&gt;Drag 1&lt;/li&gt;
      &lt;li class="drag"&gt;Drag 2&lt;/li&gt;
      &lt;li class="drag"&gt;Drag 3&lt;/li&gt;
      &lt;li class="drag"&gt;Drag 4&lt;/li&gt;
      &lt;li class="drag"&gt;Drag 5&lt;/li&gt;
      &lt;li class="drag"&gt;Drag 6&lt;/li&gt;
      &lt;li class="drag"&gt;Drag 7&lt;/li&gt;
      &lt;li class="drag"&gt;Drag 8&lt;/li&gt;
      &lt;li class="drag"&gt;Drag 9&lt;/li&gt;
      &lt;li class="drag"&gt;Drag 10&lt;/li&gt;
      &lt;li class="drag"&gt;Drag 11&lt;/li&gt;
      &lt;li class="drag"&gt;Drag 12&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  
  
    var sort_opts = {
      helper: function(e, ui) {
        ui.children().each(function() {
          $(this).width($(this).width());
        });
        return ui;
      },
      stop: function(e, ui) {
        tableObj.siblings('.' + attrs.realm + '-reorder-weights').val(tableObj.sortable('toArray').toString());
      },
      axis: 'y',
      items: 'li.drag'
    };
    $('.draggable').sortable( sort_opts );
  </code></pre>
  
  <p>In Firefox, Chrome, etc dragging the handle to the bottom of the scrollable div will scroll the div. However, this is not the case for Internet Explorer (8,9)...</p>
  
  <p>Is there a way to make it so that dragging the handle to be bottom of the scrollable div will also scroll the div in IE?</p>
  
  <p>I tried doing <code>position:relative</code> on the div but now the div would scroll infinitely instead of stopping at the bottom so that's a no go....</p>