我有一个可拖动元素的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
只能接受可拖动元素的后代元素,但显然它也可以接受选择器