I have been having an issue for some time when using jquery draggables inside a scrollable div.
Here is a picture to illustrate (The item that is being dragged is the floating box with "SISTER CARRIE" inside of it (pay no attention to the invalid ISBNs)): 
The issue is that when initially dragging, the mouse pointer is right were I expect it to be: inside the li being dragged. However, once I reach the bottom of the scrollable pane and it begins autoscrolling (the result of the scroll option), the mouse very quickly becomes misaligned as illustrated above.
Javascript:
$element.draggable({
revert: true,
revertDuration: 250,
cursor: "pointer",
scroll: true,
zIndex: 1000,
start: function (e, ui) {
//stuff
},
stop: function (e, ui) {
//stuff
}
})
HTML (The elements with data-bind="draggable: ... are $element in the above code):
<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>
What am I doing wrong? This looks a lot like the example on the draggable page for auto-scroll except that a overflowed div is scrolling rather than the entire document. I feel that this may be the issue, but I have found no advice to correct it in my searching (searching for this is hard because people have had so many other different issues with the scrollable).
Thanks in advance for any insights.
