jQuery ui 对话框拖动问题答案

【问题标题】：jQuery ui dialog dragging issuesjQuery ui 对话框拖动问题
【发布时间】：2013-06-22 05:04:39
【问题描述】：

我为我们的一款产品使用了 jQuery ui (jquery-ui-1.10.3) 对话框插件，发现了一个可能的“问题”：当托管页面较小或托管页面的当前视图滚动到顶部时，拖动打开的对话框的行为符合预期。当在滚动到不在顶部的某处的大页面中托管对话框时，问题开始显现，在这种情况下，对话框在拖动过程中开始跳动。 IE 9 和最新的 Firefox (21.0) 都会出现这种情况。

页面是动态生成的、复杂的并且必须很长。我不熟悉小提琴，但它似乎没有我可以使用的 jQuery-ui lib 选项的选项。

更具体地说，我发现如果我将托管页面向下滑动 100 像素（因此托管页面的顶部 100 像素“馈入”到浏览器窗口的顶部边框中）然后当我拖动对话框时，而不是跟随鼠标，它会向下跳 100 像素，使其脱离鼠标捕获。

对话框初始化为

$(元素).dialog({ 自动打开：假，宽度：950，高度：820，模态：假，可调整大小：真，可拖动：真 });

我的问题是：1）其他人有同样的问题吗？ 2) 如果是这样，这是设置问题还是错误。

这里有哪位专家可以帮我解决一下吗？

【问题讨论】：

在描述问题时尝试方式更具体。您应该考虑分享一个 fiddle 来展示您的体验。您不能只说“它开始跳动”并期望我们从技术角度理解问题。您是否尝试使用 containment 选项？让我们看看你的代码。
页面是动态生成的、复杂的并且必须很长。对fiddle不熟悉，jQuery-ui似乎没有选择。
您可以在左侧“框架和扩展”（页面上的第一件事）下的下拉列表中选择许多不同版本的 jQuery。
涉及到什么样的CSS？那将是我要看的第一个地方......我会玩 jsFiddle（或other options）。当您尝试拼凑一个可重现的示例时，您可能会偶然发现导致它的代码片段。
基本上所有的 jQuery-ui，加上 jquery.qtip 和我们自己的 css。我会看看我们自己的css文件中是否有错误。但从显示的行为来看，似乎 lib 没有正确处理/区分窗口顶部或文档顶部，只是猜测，我可能是错的......

标签： javascript jquery-ui

【解决方案1】：

我曾经遇到过同样的问题，页面上的内容是自动生成的。很长。

html, body {position: relative} 解决了这个问题。

【讨论】：

我遇到了 1.10.4 的问题。这修复了它，没有明显的副作用。
谢谢，但这很奇怪。我有 1.10.4 和 html, body { position: relative } 并遇到了这个错误。看了这篇文章后bug解决了，我尝试从html和body中删除position: relative，问题就消失了。
哇，我有点惊讶它的效果。 CSS 修复解决了我在 IE8+ 和 Firefox 中的 jqueryUI 1.10.3 和 jquery 1.9.1 问题。
这也解决了我们的问题，+1

【解决方案2】：

好的，我发现这是jQuery-ui 1.10.3的一个bug，see here:

仅在使用 UI 1.10.3 且滚动条不可用时才会出现在 Firefox、Opera、IE8 中名列前茅。

在 Chrome 中运行良好，并且在其他浏览器上也适用于 1.10.2。

UI 对话框演示页面也有这个错误：

向下拖动对话框直到出现滚动条再次向下滚动向下拖动对话框。对话框随着偏移量下降

【讨论】：

+1，如果您在容器中引入垂直滚动条，这实际上发生在 jquery UI dialog sample page 上。
@Alex，不错。如果可能，一个快速的解决方案是使用 1.10.2。
我实际上在 1.10.2 和 1.11.0 中遇到了同样的问题。如果底层页面位于顶部位置（垂直滚动条位于顶部位置），则在拖动对话框时不会发生这种情况。但是，如果您向下滚动一点并打开对话框，然后尝试移动它，它会向下跳到大约与您向下滚动页面相同的长度。
也就是说，对话框好像把页面的绝对坐标和相对坐标搞乱了。

【解决方案3】：

我修复这个bug的方法和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");
            }
        });

我的版本：jQuery UI - v1.10.3 - 2013-10-10

【讨论】：

我正在使用与 jQueryUI 1.10.4 集成的 apex 5.0 问题也有你的修复修复了这个问题。

【解决方案4】：

我认为有一个错误。我也遇到过这个问题。我解决此问题以关闭拖动的解决方案。只是使可拖动为假。像这样：

$(element).dialog({ 
    autoOpen: false, width: 950, height: 820, 
    modal: false, resizable: true, draggable: false
});

【讨论】：

【解决方案5】：

更新 jQuery UI 库 (js) 对我有用。 http://jqueryui.com/download/
记得也要更新你的 css 文件。

【讨论】：

【解决方案6】：

错误报告：view bug report

我修复此错误的解决方案是“重置”“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;
    }
});

我的版本：jQuery UI - v1.10.4 - 2014-01-17

这个解决方案对我有用。希望在修复这个丑陋的错误之前，它也能对您有所帮助。

【讨论】：