jQuery可拖動內部滾動未對齊

Question

在可滾動div中使用jquery可拖動對象時，我一直遇到問題。

這是一張圖片來說明（被拖動的項目是其中帶有“ 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為$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正在滾動而不是整個文檔。 我覺得這可能是問題所在，但我在搜索中沒有找到糾正該問題的建議（搜索很困難，因為人們在滾動式菜單上遇到了很多其他不同的問題）。

預先感謝您的任何見解。

Answer 1

我也有這個問題。 添加refreshPositions: true在可拖動選項的底部為refreshPositions: true 。

來源： http ： //api.jqueryui.com/draggable/#option-refreshPositions