javascript jQuery ui 对话框拖动问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17247486/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery ui dialog dragging issues
提问by SFD - jinan
I used the jQuery ui (jquery-ui-1.10.3) dialog pluggin for one of our products, and found a possible "problem": When the hosting page is small or the current view of the hosting page is scrolled to the top, dragging an openned dialog box behaves as what is expected. The problem start to manifest when hosting a dialog in a large page which is scrolled to somewhere not at the top, in which case the dialog box starts to jump around during dragging. It happens to both IE 9 and the latest Firefox (21.0).
我在我们的一个产品中使用了 jQuery ui (jquery-ui-1.10.3) 对话框插件，发现一个可能的“问题”：当托管页面很小或托管页面的当前视图滚动到顶部时，拖动打开的对话框的行为符合预期。当在滚动到不是顶部的某个地方的大页面中托管对话框时，问题开始显现，在这种情况下，对话框在拖动过程中开始跳来跳去。它发生在 IE 9 和最新的 Firefox (21.0) 上。
The page is dynamically generaed, complex and has to be long. I am not familiar with fiddle, but it seems to have no option for jQuery-ui lib option that I can use.
该页面是动态生成的，复杂且必须很长。我不熟悉小提琴，但它似乎没有我可以使用的 jQuery-ui lib 选项。
More specifically, I found if I scoll the hosting page 100px down (so the top 100px of the hosting page is 'feed' into the top border of the browser window) then when I drag the dialog, instead of it following the mouse, it jumps down 100px so that it is out of the mouse capture.
更具体地说，我发现如果我将托管页面向下 100 像素（因此托管页面的前 100 像素是“馈送”到浏览器窗口的顶部边框）然后当我拖动对话框时，而不是跟随鼠标，它向下跳 100 像素，使其脱离鼠标捕获。
The dialog is initiallized as
对话框初始化为
$(element).dialog({
autoOpen: false, width: 950, height: 820,
modal: false, resizable: true, draggable: true
});
My questiong is: 1) does any one else has the same issue? 2) If so, is this an setting issue or a bug.
我的问题是：1）其他人有同样的问题吗？2) 如果是这样，这是设置问题还是错误。
Any expert here can help me with it?
这里有没有专家可以帮我解决这个问题？
回答by robert
I used to have the same issue, content on the page is generated automatically. It is very long.
我曾经有同样的问题，页面上的内容是自动生成的。它很长。
html, body {position: relative}solves the problem.
html, body {position: relative}解决了这个问题。
回答by SFD - jinan
OK, I found this is a bug of jQuery-ui 1.10.3, see here:
好的，我发现这是 jQuery-ui 1.10.3 的一个错误，请看这里：
That appears only with using UI 1.10.3 and when the scrollbar is not at the very top in Firefox, Opera, IE8.
In Chrome works fine and also with 1.10.2 on other browsers.
The UI dialog demo page has this bug too:
drag the dialog down until appears the scrollbar scroll down again drag the dialog down. dialog goes down with the offset
只有在使用 UI 1.10.3 并且滚动条不在 Firefox、Opera、IE8 的最顶部时才会出现这种情况。
在 Chrome 中工作正常，在其他浏览器上也可以与 1.10.2 一起使用。
UI 对话框演示页面也有这个错误：
向下拖动对话框直到出现滚动条再次向下滚动将对话框向下拖动。对话框随着偏移量下降
回答by Grimalt Santiago
My solution to fix this bug is similar to that of Dado, but using the drag event:
我修复此错误的解决方案与 Dado 的解决方案类似，但使用了拖动事件：
$(element).dialog({
draggable: true,
drag: function(event, ui) {
var fixPix = $(document).scrollTop();
iObj = ui.position;
iObj.top = iObj.top - fixPix;
$(this).closest(".ui-dialog").css("top", iObj.top + "px");
}
});
My version: jQuery UI - v1.10.3 - 2013-10-10
我的版本：jQuery UI - v1.10.3 - 2013-10-10
回答by Iman Sedighi
I think there is a bug. I faced to this problem too. My solution for fixing this to turn off the dragging. Just make draggable false. Like this:
我认为有一个错误。我也遇到过这个问题。我解决此问题以关闭拖动的解决方案。只需将 draggable 设为 false。像这样：
$(element).dialog({
autoOpen: false, width: 950, height: 820,
modal: false, resizable: true, draggable: false
});
回答by Herlon Aguiar
Update the jQuery UI Library (js) worked for me.
http://jqueryui.com/download/
Remember to update your css files too.
更新对我有用的 jQuery UI 库 (js)。
http://jqueryui.com/download/
记得更新你的 css 文件。
回答by Dado
Bugreport: view bug report
My solution to fix this bug is to "reset" the "ui.position.top" (for me 228px).
我修复这个错误的解决方案是“重置”“ui.position.top”（对我来说是 228px）。
$(element).dialog({
dragStart: function(event, ui) {
var fixPix = 228; // offset top (add your own here!)
iObj = ui.position;
if (iObj.top > fixPix) {
iObj.top = iObj.top - fixPix;
}
ui.position = iObj;
}
});
My version: jQuery UI - v1.10.4 - 2014-01-17
我的版本：jQuery UI - v1.10.4 - 2014-01-17
This solution works for me. Hope it helps you too until this ugly bug is fixed.
这个解决方案对我有用。希望它也能帮助你，直到这个丑陋的错误得到修复。
