jquery UI Draggable in IE10 bug当通过滚动条拖动时答案

【问题标题】：jquery UI Draggable in IE10 bug when dragging by scroll barjquery UI Draggable in IE10 bug当通过滚动条拖动时
【发布时间】：2014-07-05 07:59:23
【问题描述】：

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

我已经设置了这个小提琴：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});
});

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

这个问题有解决办法吗？

【问题讨论】：

您是否记录了框架的错误？
不，我没有，我仍在尝试确定这是 jQuery UI 还是 IE10 的错误。甚至是一个错误，我总是有可能做错了什么。

标签： javascript jquery jquery-ui internet-explorer-10 jquery-ui-draggable

【解决方案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'});

【讨论】：

【解决方案2】：

我找到了解决方案，以防万一其他人遇到这个问题。

答案是为 div 中我希望能够用来拖动的每个元素添加一个类。我使用了draggy这个类。

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

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

这在 jQuery UI 文档中没有解释，因为它说 handle 只能接受可拖动元素的后代元素，但显然它也可以接受选择器。

【讨论】：