javascript - 带有滚动条的 Jquery Fancybox 可拖动问题

Question

我正在使用带有插件 jquery.easydrag.js 的 fancybox。这样做的原因是能够拖动 fancybox。

它似乎工作正常，但是当 fancybox 有滚动条时问题就来了。 IE。例如，当单击提交而不输入任何字段时，屏幕上的验证会导致滚动条。这通常很好，但滚动条会导致可拖动功能出现各种问题，因此当我尝试上下单击滚动条时，它实际上会移动整个窗口。所以对于什么内容可以移动以及滚动条可以做什么似乎很困惑。

        claimLink.fancybox({
        'width': 500,
        'height': 590,
        'autoDimensions': false,
        'onCleanup': function (e) {

            var modelClaimFormId = $j(e).attr("href").replace("body", "");
            var modalClaimForm = $j(modelClaimFormId);

            if (!($j(modalClaimForm).valid())) {
                $j(claimForm).remove();
                $j(e).parents("tr").remove();
            }

        }
    });

    $j("#fancybox-wrap").easydrag(true);

编辑:

我设法为输入和文本区域添加了一些东西来忽略滚动(见下文)...只是想知道我能为滚动条做些什么。

                $j("#fancybox-wrap").easydrag(true);

            $j("#fancybox-wrap input,textarea").click(function(){
                $j("#fancybox-wrap").dragOff();
            });
            $j("#fancybox-wrap input,textarea").mouseover(function () {
                $j("#fancybox-wrap").dragOff();
            });
            $j("#fancybox-wrap input,textarea").blur(function () {
                $j("#fancybox-wrap").dragOn();
            });
            $j("#fancybox-wrap input,textarea").mouseout(function () {
                $j("#fancybox-wrap").dragOn();
            });

This是easydrag插件的JS链接

Answer 1

我发布了 first example关于如何在 2009 年为 v1.2.1 使 fancybox 可拖动。然后我发布了一些注释以使其与 v1.3.1 一起使用 as seen here但是当引入 fancybox v1.3.4 时，easyDrag 插件的运行不如以前的版本流畅，并且开始出现错误。我没有时间找到解决方法……所以我就放弃了。

虽然解决方案很简单:easyDrag 插件提供了一种设置“handler”的方法 as explained here因此，无需按住并拖动整个 #fancybox-wrap 容器，它会阻止对滚动条的访问(如果有的话)，您只需从特定定义的元素中拖动灯箱即可。这样的处理程序可以附加到#fancybox-wrap选择器，并使用onComplete回调API选项在EasyDrag插件中设置它，例如:

'onComplete': function(){
  // append the handler on the top-left corner of fancybox
   $("#fancybox-wrap").append("<button id='handler'>Drag me</button>");
  // set the handler using the handler's element ID
   $("#fancybox-wrap").setHandler('handler');
}

请注意，您可以使用任何元素作为处理程序，在我的示例中，我使用了一个 html 按钮，但如果愿意，您也可以使用图像。重要的是将最小的重要 css 属性分配给处理程序，以便它可以附加到 #fancybox-wrap 容器而不会出现问题，例如:

width: 80px; /* or whatever needed */
height: 24px;
position: absolute; /* important to position the handler into the fancybox wrap */
top: 0; /* top-left corner of the box but can be anywhere */
left: 0;
display: block;
z-index: 1120; /* important to be over the box */

其他属性可以是装饰性的。

查看working here !!!

完成并提交表单后，响应将是一个带有滚动条的新花式框，您可以独立于 easyDrag 处理程序使用它。

请随意分析代码并根据自己的需要对其进行自定义(不要忘记给我赏金；)

更新:请注意，由于每次触发 fancybox 时我们都将处理程序附加到 #fancybox-wrap 容器，因此我们需要在关闭 fancybox 后将其删除使用 onClosed 回调，否则如果我们再次打开 fancybox 并出现意外结果，我们将复制处理程序:

'onClosed' : function() {
  $("#fancybox-wrap #handler").remove();
}

我更新了my DEMO也是。

最后注意:此解决方案适用于 fancybox v1.3.4。

我还没有用 v2.x 测试过它，但我不明白为什么它不起作用。只需确保绑定(bind) EasyDrag 并将处理程序附加到 .fancybox-wrap 选择器即可

$(".fancybox-wrap").easydrag(); 

您可以使用 afterShow 回调将处理程序附加到它，并使用 afterClose 将其删除。