У меня возникла проблема в течение некоторого времени при использовании jquery draggables внутри прокручиваемого div.JQuery перетаскиваемый внутренний прокручиваемый несоосность
Вот картинка для иллюстрации (Элемент, тащат это плавающий ящик с «Сестра Керри» внутри него (не обращайте внимание на недействительные ISBNs)): 
Вопрос заключается в том, что, когда изначально перетаскивая указатель мыши, я ожидал, что это будет: внутри li будет перетаскиваться. Однако, как только я дойду до нижней части прокручиваемой панели, и она начнет автопрокрутку (результат опции scroll), мышь очень быстро смещается, как показано выше.
Javascript:
$element.draggable({
revert: true,
revertDuration: 250,
cursor: "pointer",
scroll: true,
zIndex: 1000,
start: function (e, ui) {
//stuff
},
stop: function (e, ui) {
//stuff
}
})
HTML (Элементы с data-bind="draggable: ... являются $element в коде выше):
<div class="well well-sm" style="overflow-y: auto; max-height: 400px;">
<div data-bind="foreach: adoptions">
<div class="panel panel-primary">
<div class="panel-heading">
Choose <input data-bind="value: chooseNOptions" type="text" class="form-control" style="width: 50px;" /> Options:
</div>
<div class="panel-body">
<ul data-bind="foreach: options" class="list-group">
<li data-bind="draggable: 'option', draggableCollection: $parent.options" class="list-group-item">
<h4 class="list-group-item-heading">
Option <span data-bind="text: $index() + 1"></span>
</h4>
<div class="list-group-item-text">
<ul data-bind="foreach: items" class="list-group">
<li data-bind="draggable: 'item', draggableCollection: $parent.items" class="list-group-item">
<h4 data-bind="text: isbn" class="list-group-item-heading"></h4>
<p class="list-group-item-text">
Title: <span data-bind="text: title"></span><br />
Author: <span data-bind="text: author"></span>
</p>
</li>
</ul>
<ul class="list-group">
<li class="list-group-item">
<span class="glyphicon glyphicon-plus"></span> Add Item
</li>
</ul>
</div>
</li>
</ul>
<ul class="list-group">
<li class="list-group-item">
<span class="glyphicon glyphicon-plus"></span> Add Option
</li>
</ul>
</div>
</div>
</div>
</div>
Что я делаю неправильно? Это очень похоже на пример на странице перетаскивания для автоматического прокрутки, за исключением того, что переполненный div прокручивается, а не весь документ. Я чувствую, что это может быть проблемой, но я не нашел совета по ее исправлению в поиске (поиск этого затруднен, потому что у людей было так много других проблем с прокручиваемым).
Заранее благодарим за любые идеи.