Question

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

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

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

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

似乎鼠标事件没有被触发但是当鼠标从滚动条上点击时，这似乎是IE10的一个错误，所以我尝试使用滚动事件... < / p>

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

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

此问题是否有解决方法？

Answer 1

我找到了解决方案以防其他人遇到此问题。

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

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

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

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

Answer 2

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

在滚动条拖动时，IE3中的jquery UI可拖动bug

2 个答案: