jquery UI可拖动在IE10的错误时，拖动滚动条

jquery UI Draggable in IE10 bug when dragging by scroll bar

本文关键字：拖动 错误 滚动条 IE10 UI jquery      更新时间：2023-09-26

我有一个可拖动元素的div，它在所有浏览器中都能很好地工作，除了IE10，有一个问题，如果你试图通过滚动条拖动元素，它会滚动，直到你鼠标up，在这种情况下，元素会抓取到鼠标的当前位置。

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

如果你使用的是IE10，只需点击并按住滚动条，然后放开。div将跟随你的鼠标，即使你目前没有鼠标按下，据我所知，让它停止的唯一方法是右键单击。

因此，我尝试在鼠标右键单击时为可拖动元素添加触发器，但它不起作用。

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

当鼠标在滚动条上点击时，鼠标上升事件似乎没有被触发，所以这似乎是IE10的一个bug，所以我尝试使用滚动事件…

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

不幸的是，我发现即使是滚动事件也不会触发，直到点击鼠标右键。

是否有解决这个问题的方法?

如果有人来到这里，不确定在哪里添加"。在回答中讨论的拖拽类是一个不能工作的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/strong> 

$('.modal-dialog').draggable({handle: '.draggableSection'});

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

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

那么你可以使用这个类作为handle选项的选择器。

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

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

相关文章：