Question

我为我们的某个产品使用了jQuery ui（jquery-ui-1.10.3）对话框插件，并发现了一个可能的“问题”：当托管页面较小或托管页面的当前视图滚动到顶部时，拖动打开的对话框的行为与预期的相同。当在大页面中托管对话框时，问题开始显现，该页面滚动到不在顶部的某个位置，在这种情况下，对话框在拖动期间开始跳转。它适用于IE 9和最新的Firefox（21.0）。

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

更具体地说，我发现如果我将主机页面100px缩小（所以托管页面的前100px是'feed'进入浏览器窗口的顶部边框）然后当我拖动对话框时，而不是跟随它鼠标，它跳下100px，以便它不受鼠标捕获。

对话框初始化为

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

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

这里的任何专家都可以帮助我吗？

Answer 1

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

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

Answer 2

好的，我发现这是jQuery-ui 1.10.3的错误，see here：

仅在使用UI 1.10.3且滚动条不是时才显示   在Firefox，Opera，IE8中处于最顶端。

在Chrome中运行良好，在其他浏览器上也可以使用1.10.2。

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

向下拖动对话框，直到滚动条再次向下滚动   拖动对话框。对话框以偏移量
下降

Answer 3

我修复此错误的解决方案类似于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

Answer 4

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

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

Answer 5

更新为我工作的jQuery UI Library（js）。 http://jqueryui.com/download/
记得也要更新你的css文件。

Answer 6

Bugreport：view bug report

我修复此错误的解决方案是＆＃34;重置＆＃34; ＆＃34; ui.position.top＆＃34; （对我来说是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

此解决方案适合我。希望它能帮助你，直到修复这个丑陋的bug。

jQuery ui对话框拖动问题

6 个答案: