javascript - jquery UI Draggable in IE10 bug 当通过滚动条拖动时

Question

我有一个带有可拖动元素的 div，它在所有浏览器中都很好用，除了 IE10，有一个问题，如果你试图通过滚动条拖动元素，它会滚动，直到你按下鼠标，在其中情况下元素将吸附到鼠标的当前位置。

我已经设置了这个 fiddle :http://jsfiddle.net/Hhja4/1/

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

正因为如此，我尝试为鼠标右键单击添加一个触发器到可拖动元素，但它不起作用..

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

虽然当鼠标从滚动条上单击时出现，但似乎没有触发 mouseup 事件，所以这似乎是 IE10 的错误，所以我尝试使用滚动事件...

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

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

这个问题有解决办法吗？

Answer 1

如果有人来到这里并且不确定在哪里添加答案中讨论的“.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'});