JQuery перетаскивается внутри прокручиваемого смещения

У меня возникла проблема в течение некоторого времени при использовании jquery draggables внутри прокручиваемого div.

Вот изображение, которое можно проиллюстрировать (элемент, который перетаскивается, представляет собой плавающий блок с "SISTER CARRIE" внутри него (не обращайте внимания на недопустимые ISBN):

Проблема в том, что при первоначальном перетаскивании указатель мыши прав, я ожидаю, что это будет: внутри 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 прокручивается, а не весь документ. Я чувствую, что это может быть проблемой, но я не нашел совета по ее исправлению в поиске (поиск этого затруднен, потому что у людей было так много других проблем с прокручиваемым).

Заранее благодарим за любые идеи.