javascript - スクロール可能なミスアライメント内でドラッグ可能なJQuery

Question

スクロール可能な div 内で jquery draggables を使用すると、しばらくの間問題が発生しました。

説明するための図を次に示します (ドラッグされているアイテムは、その中に「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 がスクロールしていることを除いて、自動スクロールのドラッグ可能なページの例によく似ています。これが問題かもしれないと感じていますが、私の検索ではそれを修正するためのアドバイスは見つかりませんでした (人々はスクロール可能で他の多くの問題を抱えているため、これを検索するのは困難です)。

洞察を事前に感謝します。