jQuery UI在滚动条拖动时在IE10中可拖动 [英] jquery UI Draggable in IE10 bug when dragging by scroll bar

问题描述

我有一个带有可拖动元素的div，该元素在所有浏览器中都很好用，除了IE10之外，存在一个问题，即如果您尝试通过滚动条拖动该元素，它将滚动直到您将鼠标悬停在其中，这种情况下元素将捕捉到鼠标的当前位置.

I've got a div with a draggable element which works great in all browsers, except in IE10, there is an issue where if you attempt to drag the element by the scrollbar, it will scroll, until you mouseup, in which case the element will snap to the current position of your mouse.

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

I've setup this fiddle: http://jsfiddle.net/Hhja4/1/

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

If you are using IE10, just click and hold on the scroll bar and then let go. The div will then follow your mouse around even though you don't currently have the mousedown, and as far as I can tell, the only way to make it stop is to right click.

因此，我尝试将触发器添加到可拖动元素上以进行鼠标右键单击，但是它不起作用.

Because of this, I've tried adding a trigger to the draggable element for a right mouse click, but it's not working..

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

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

It would seem as though the mouseup event isn't being fired though when the mouse is coming up off a click on the scrollbar, so this seems to be a bug with IE10 so I tried using the scroll event...

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

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

Unfortunately, I've found that even the scroll event isn't going to fire until the right mouse button is clicked.

是否有解决此问题的方法?

Is there a workaround for this problem?

推荐答案

如果有人来到这里并且不确定在哪里添加".draggy"类(答案在此处进行了讨论)，这是无法正常工作的html的示例然后添加修复它的css类:

In case someone comes here and is unsure exactly where to add the ".draggy" class that is discussed in the answer here is an example of non-working html and then the addition of the css class that fixes it:

原始和破损:

<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"的位置，这对于消除滚动条问题很重要):

---

Correct Html (notice the placement of the css class name "draggableSection", this is important to getting the scrollbar issue to go away):

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

这篇关于jQuery UI在滚动条拖动时在IE10中可拖动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！