在使用滚动条拖动时，IE10中jquery UI Draggable存在缺陷

Question

我有一个带可拖动元素的div，它在所有浏览器中都很好用，但是在IE10中存在一个问题：如果你试图通过滚动条拖动元素，它会滚动，直到你松开鼠标，此时元素将捕捉你鼠标的当前位置。

我设置了这个fiddle：http://jsfiddle.net/Hhja4/1/ 如果您使用IE10，请单击并按住滚动条，然后松开。即使您当前没有按下鼠标，div也会跟随您的鼠标移动，据我所知，唯一让它停止的方法是右键单击。

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

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

似乎在鼠标通过滚动条点击并释放后，鼠标弹起事件（mouseup）没有被触发，这似乎是IE10的一个bug，因此我尝试使用滚动事件（scroll event）...

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

很不幸，我发现即使滚动事件被触发，也要等到右键单击后才会生效。

这个问题有解决方法吗？

- user1669496

---

你是否已经向框架提交了一个错误报告？ - epascarello

没有，我还在尝试决定这是jQuery UI还是IE10的错误。甚至可能根本不是错误，总有可能是我做错了什么。 - user1669496

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'});

- John Maloney

Answer 2

如果有其他人遇到这个问题，我找到了解决方案。

答案是在我想要拖动的每个元素中添加一个类。 我使用了类draggy。

然后您可以将该类用作handle选项的选择器。

$(document).ready(function() {
    $('#content\\:pnlPopEmail').draggable({handle: '.draggy'});
});

在jQuery UI的文档中没有详细说明，只是说handle只能接受作为可拖拽元素后代的元素，但显然它也可以接受选择器。

- user1669496