JQuery UI перетаскивается, не прокручивая сортируемый контейнер

У меня есть некоторые перетаскиваемые элементы (#draggable li), которые я перетаскиваю в сортируемом (#sortable).

Сортируемый объект оборачивается двумя элементами div, а внешний div имеет переполнение-y: scroll. Механизм перетаскивания работает нормально, пока сортируемый список не расширяется и не прокручивается.

Когда я пытаюсь перетащить элемент непосредственно на сортируемую, я не могу заставить сортируемую полосу прокрутки автоматически прокручиваться так, как я хочу (скажем, хочу подняться вверх, чтобы опуститься выше первого элемента, или спуститься, чтобы опуститься ниже последний элемент). Но когда я пытаюсь перетащить и отсортировать элементы между собой, полоса прокрутки автоматически прокручивается при перетаскивании.

Это ошибка или сбой в работе моего кода.

Вот полный код:


    
        Item 1
        Item 2
        Item 3
        Item 4
        Item 5
        Item 6
    

  
    
      
      
    
  

// CSS

#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;
}

// JS

$(function() {
  $( "#sortable" ).sortable({
       placeholder: "marker",
       axis: "y",
  });

  $("#draggable li").draggable({
      helper: "clone",
      cursor: "move",
      revert: "invalid",
      revertDuration: 500,
      connectToSortable: "#sortable"
  });
});

демо на скрипкеhttp://jsfiddle.net/8KDJK/21/

Любая помощь будет принята с благодарностью. Спасибо :)

Ответы на вопрос(2)

Ваш ответ на вопрос