IE10 中的 jquery UI Draggable 通过滚动条拖动时出现 bug

我有一个带有可拖动元素的 div，它在所有浏览器中都工作得很好，除了 IE10，存在一个问题，如果您尝试通过滚动条拖动该元素，它会滚动，直到您松开鼠标，在这种情况下该元素将捕捉到鼠标的当前位置。

我已经设置了这个小提琴：http://jsfiddle.net/Hhja4/1/ http://jsfiddle.net/Hhja4/1/

如果您使用的是 IE10，只需单击并按住滚动条然后松开即可。然后，即使您当前没有鼠标按下，div 也会跟随您的鼠标移动，据我所知，使其停止的唯一方法是右键单击。

因此，我尝试向可拖动元素添加触发器以单击鼠标右键，但它不起作用。

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

虽然当鼠标从滚动条上单击而升起时，似乎 mouseup 事件并未被触发，所以这似乎是 IE10 的一个错误，所以我尝试使用滚动事件......

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

不幸的是，我发现即使是滚动事件也不会触发，直到单击鼠标右键。

这个问题有解决方法吗？

如果有人来到这里并且不确定在哪里添加答案中讨论的“.draggy”类，这里是一个非工作 html 的示例，然后添加修复它的 css 类：

原始和破损：

<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>

原始和损坏的 Javascript：

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

正确的 HTML（注意 css 类名“draggableSection”的位置，这对于解决滚动条问题很重要）：

<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>

正确的 JavaScript

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