Jquery Fancybox 可拖动的滚动条问题

Jquery Fancybox draggable issue with Scrollbars

本文关键字：滚动条 问题 拖动 Fancybox Jquery      更新时间：2023-09-26

我正在使用一个带有插件jquery.easydrag.js的花哨框。这样做的原因是能够拖拽花哨的盒子。

它似乎工作正常，但是当花哨的框具有滚动条时，问题就来了。 例如，当单击提交并且不输入任何字段时，屏幕上的字符会导致滚动条。这通常很好，但是滚动条会导致可拖动功能出现各种问题，因此当我尝试上下单击滚动条时，它实际上会移动整个窗口。因此，对于可以移动哪些内容以及如何使用滚动条似乎感到困惑。

        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();
            });

这是轻松拖动插件的JS链接

我在 2009 年为 v1.2.1 发布了第一个关于如何使 fancybox 可拖动的示例。然后我发布了一些注释，使其与 v1.3.1 一起使用，如下所示，但是当引入 fancybox v1.3.4 时，easyDrag插件不像以前的版本那样流畅，并开始表现错误。我没有时间找到解决方法...所以我只是放弃它。

解决方案很简单：easyDrag插件提供了一种设置"处理程序"的方法，如此处所述，因此无需按住并拖动整个#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 */

其他属性可以是化妆品。

看到它在这里工作!!

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

请随时分析代码并根据自己的需求对其进行自定义（不要忘记授予我赏金;)

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

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

我也更新了我的演示。

最后注意：此解决方案适用于花式盒子v1.3.4。

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

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

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

使用上述解决方案使用 onComplete 回调 API 为 #fancybox-wrap 选择器添加处理程序以及 EasyDrag 插件，我发现这与 fancybox 1.3.4 标题元素配合得很好，以创建一个具有滚动功能的可拖动花式框。 使用标题，无需在关闭后将其删除。

 <script type="text/javascript" src="@Url.Content("~/fancybox/jquery.mousewheel-3.0.4.pack.js")"></script>
 <script type="text/javascript" src="@Url.Content("~/fancybox/jquery.fancybox-1.3.4.pack.js")"></script> 
 <script src="@Url.Content("~/Scripts/jquery.easydrag.handler.beta2.js")" type="text/javascript"></script> 
 <script>    
     //Fancybox
     $(document).ready(function () {            
         $("#iframeVideoPop").fancybox({
             'width': 890,
             'height': 595,
             'type': 'iframe',
             'autoScale': 'false',
             'hideOnContentClick': false,
             'onComplete': function() {
                  //Style the title where and how you want it
                  $("#fancybox-title").css({'top':'-20px', 'bottom':'auto'});
                  //Set the fancybox-title as the handler
                  $("#fancybox-wrap").setHandler('fancybox-title');
               }
         });
        $("#fancybox-wrap").easydrag();
     }); //ready
 <script>

为了消除将Easydrag与Fancybox组合引起的滚动条问题，您需要消除滚动条。默认情况下，Fancybox CSS 样式表将overflow:auto规则应用于元素（由 Fancybox 生成），该元素环绕 Fancybox 中显示的内容。

要覆盖它，请包含您自己的 CSS 规则，该规则将取代 Fancybox 应用于包装器的规则。将此样式块放在网页的<head>部分：

<style>
    /* id of the element generated and used by Fancybox as a wrapper around
       the generated content. */
    #fancy_ajax {
        /* Use the important identifier to ensure the overflow:auto is suppressed */
        overflow:none !important;
    }
</style>

这将消除滚动条并允许轻松拖动插件顺利工作。

在测试了这些解决方案后，我遇到了拖动iframe的问题。 为了解决这个问题，我切换到jQuery 1.9.1 UI插件进行拖动，并在拖动时创建了一个透明图像。 拖动后删除图像以访问内容。 非常适合花哨的盒子iframe，并且可以在iframe上快速拖动。请参阅下面的示例代码。

$("#iframePop").fancybox({
             'width': 890,
             'height': 430,
             'type': 'iframe',
             'autoScale': 'false',
             'hideOnContentClick': false,
             'onComplete': function() {
                  $("#fancybox-title").css({'top':'-2px', 'left':'15px', 'bottom':'auto', 'cursor':'move'});                       
                  $("#fancybox-wrap" ).draggable({ handle: "fancybox-title", iframeFix: true, 
                        start: function(ev,ui){$("#fancybox-wrap").append("<img src='@Url.Content("~/Content/Images/transparent.png")' id='hidenImg' style='border: 1px solid black; width: 640px; height: 400px; top: 20px; position: absolute; z-index: 10000;' />")}, 
                        drag: function(ev,ui){}, 
                        stop: function(ev, ui){$("#fancybox-wrap #hidenDiv").remove()} 
                  });  
                }
         });
相关文章：