jquery UI Draggable in IE10 bug when dragging by scroll bar

Question

I've got a div with a draggable element which works great in all browsers, except in IE10, there is an issue where if you attempt to drag the element by the scrollbar, it will scroll, until you mouseup, in which case the element will snap to the current position of your mouse.

I've setup this fiddle: http://jsfiddle.net/Hhja4/1/

If you are using IE10, just click and hold on the scroll bar and then let go. The div will then follow your mouse around even though you don't currently have the mousedown, and as far as I can tell, the only way to make it stop is to right click.

Because of this, I've tried adding a trigger to the draggable element for a right mouse click, but it's not working..

$('#draggable').draggable().on('mouseup', function() {
    $('#draggable').trigger({type: 'mousedown', which: 3});
});

It would seem as though the mouseup event isn't being fired though when the mouse is coming up off a click on the scrollbar, so this seems to be a bug with IE10 so I tried using the scroll event...

$('#draggable').scroll(function() {
    $('#draggable').trigger({type: 'mousedown', which: 3});
});

Unfortunately, I've found that even the scroll event isn't going to fire until the right mouse button is clicked.

Is there a workaround for this problem?

Answer 1

In case someone comes here and is unsure exactly where to add the ".draggy" class that is discussed in the answer here is an example of non-working html and then the addition of the css class that fixes it:

Original and Broken:

<div class="modal-dialog ui-widget-content">
<div class="modal-content">
    <div class="modal-header">
        <button type="button" class="close" data-bind="click: closeWindow" aria-hidden="true"></button>
        <h4><span data-bind="text: title"></span></h4>
    </div>

    <div class="modal-body dataGridBody">
        <div id="dataGridPanel" class="portlet box xs">
            <table id="table" class="standard-grid" data-bind="attr: { 'gridId': id }"></table>
        </div>
    </div>
</div>

Original and Broken Javascript:

$('.modal-dialog').draggable();

---

Correct Html (notice the placement of the css class name "draggableSection", this is important to getting the scrollbar issue to go away):

<div class="modal-dialog ui-widget-content">
<div class="modal-content">
    <div class="modal-header draggableSection">
        <button type="button" class="close" data-bind="click: closeWindow" aria-hidden="true"></button>
        <h4><span data-bind="text: title"></span></h4>
    </div>

    <div class="modal-body dataGridBody">
        <div id="dataGridPanel" class="portlet box xs">
            <table id="table" class="standard-grid" data-bind="attr: { 'gridId': id }"></table>
        </div>
    </div>
</div>

Correct Javascript

$('.modal-dialog').draggable({handle: '.draggableSection'});