title: Jquery UI draggable not scrolling the sortable container
body: <p>I have some draggable items(#draggable li) which i am dragging and dropping them in a sortable(#sortable). </p>
  
  <p>The sortable is wrapped by two divs and the outermost div has overflow-y: scroll. The mechanism of drag and drop works fine until the sortable list expands and scrolls. </p>
  
  <p>When I try to drag and directly drop an Item on the sortable, i cannot get the sortable scrollbar to auto-scroll in the way I want to go(say want to go up to drop above the first element or go down to drop below the last element). But when I try to drag and sort the items among themselves the scroll bar auto-scrolls while dragging. </p>
  
  <p>Is it a bug or there is a fault the way my code works.</p>
  
  <p>Here is the complete code:</p>
  
  <pre><code>&lt;body&gt;
      &lt;ul id="draggable" class="connectedSortable"&gt;
          &lt;li class="ui-state-default big"&gt;Item 1&lt;/li&gt;
          &lt;li class="ui-state-default big"&gt;Item 2&lt;/li&gt;
          &lt;li class="ui-state-default big"&gt;Item 3&lt;/li&gt;
          &lt;li class="ui-state-default big"&gt;Item 4&lt;/li&gt;
          &lt;li class="ui-state-default big"&gt;Item 5&lt;/li&gt;
          &lt;li class="ui-state-default big"&gt;Item 6&lt;/li&gt;
      &lt;/ul&gt;
  
    &lt;div id="outerDiv"&gt;
      &lt;div id="innerDiv"&gt;
        &lt;ul id="sortable" class="connectedSortable"&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>//CSS</p>
  
  <pre><code>#sortable, #draggable { 
    list-style-type: none; 
    margin: 0; 
    padding: 0 0 2.5em; 
    margin-right: 10px; 
  }
  #sortable li, #draggable li { 
    margin: 0 5px 5px 5px; 
    padding: 5px; 
    font-size: 1.2em; 
    width: 120px; 
  }
  .marker{
      background: none repeat scroll 0 0 #DDDDDD;
      border-bottom: 1px solid #BBBBBB;
      border-top: 1px solid #BBBBBB;
      display: block;
      height: 20px;
      width: 100%;
      text-align: center;
      vertical-align: middle;
      color: #666;
      font-size: 18px;
      font-style: italic;
  }
  
  #outerDiv{
      background: none repeat scroll 0 0 #EEEEEE;
      height: 100%;
      right: 0;
      position: absolute;
      overflow-y: scroll; 
      top: 0;
      width: 300px;
  }
  
  #innerDiv{
      border: 1px solid #CCCCCC;
      min-height: 400px;
      position:absolute;
  }
  #sortable{
      width: 200px;
      padding: 10px;
      border : 1px solid black;
      min-height: 230px;
  }
  
  #draggable{
      position:absolute;
      top:0;
      left:0;
  }
  .big{
      height: 80px;
  }
  </code></pre>
  
  <p>//JS</p>
  
  <pre><code>$(function() {
    $( "#sortable" ).sortable({
         placeholder: "marker",
         axis: "y",
    });
  
    $("#draggable li").draggable({
        helper: "clone",
        cursor: "move",
        revert: "invalid",
        revertDuration: 500,
        connectToSortable: "#sortable"
    });
  });
  </code></pre>
  
  <p>demo on fiddle <a href="http://jsfiddle.net/8KDJK/21/" rel="nofollow">http://jsfiddle.net/8KDJK/21/</a></p>
  
  <p>Any help would be greatly appreciated. Thanks :)</p>