在可滚动的 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 正在滚动而不是整个文档。我觉得这可能是问题所在，但我在搜索中没有找到更正它的建议（搜索这个很困难，因为人们在可滚动方面遇到了很多其他不同的问题）。
提前感谢您的任何见解。