Scrollbars的Jquery Fancybox可拖动问题 [英] Jquery Fancybox draggable issue with Scrollbars

问题描述

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

I am using a fancybox with plugin jquery.easydrag.js. The reason for this is to be able to drag the fancybox around.

它看起来工作正常，但问题出现在fancybox有滚动条的时候。即例如，当单击提交而不输入任何字段时，屏幕上的valdidation会导致滚动条。这通常很好，但滚动条会导致可拖动功能的各种问题，因此当我尝试上下滚动滚动条时，它实际上会移动整个窗口。因此，似乎很困惑可以移动哪些内容以及如何使用滚动条。

It seems to be working fine, but the problem comes when the fancybox has scrollbars. I.e. for example when clicking on submit and not entering any fields the valdidation on screen causes scrollbars. Which is fine normally but the scrollbars causes all sorts of issues with the draggable feature so that when I am trying to click the scrollbar up and down, it actually moves the entire windows. So it seems to be confused as to what content can be moved and what to do with a scrollbar.

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

编辑：

我设法添加输入和textareas的东西忽略滚动看到下面...只是想知道我可以为滚动条做什么。

I managed to add something for input and textareas to ignore the scrolling see below...just wondering what I can do for scrollbars.

                $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 for easydrag插件的链接

This is the link to JS for easydrag plugin

推荐答案

我发布了第一个示例，了解如何在2009年为v1制作fancybox draggable。 2.1。然后我发布了一些注释，使其适用于v1.3.1 如此处所见但是当引入fancybox v1.3.4时， easyDrag 插件的运行速度不如以前的版本那么顺畅，并且开始出现bug。我没有时间找到解决方法...所以我放弃它。

I posted the first example about how to make fancybox draggable back in 2009 for v1.2.1. Then I posted some notes to make it work with v1.3.1 as seen here but when fancybox v1.3.4 was introduced, the easyDrag plugin was not working as smooth as with the previous versions and started behaving buggy. I didn't have the time to find a workaround ... so I just drop it.

解决方案很简单： easyDrag 插件提供了一种设置处理程序的方法如此处所述所以不要按住并拖动整个＃fancybox-wrap 容器，而是阻止访问滚动条（如果有的话） ，您只需从特定的已定义元素拖动灯箱。这样的处理程序可以附加到 #fancybox-wrap 选择器，并使用 onComplete 回调API选项如：

The solution was simple though: the easyDrag plugin provides a way to set a "handler" as explained here so instead of holding and dragging the whole #fancybox-wrap container, which blocks access to the scroll bars if any, you just drag the lightbox from a specific defined element. Such handler can be appended to #fancybox-wrap selector and set it within the EasyDrag plugin using the onComplete callback API option like:

'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 容器没有问题，如：

Notice that you can use any element as handler, in my example I used a html button but you may use an image if preferred. The important thing is to assign the minimum important css properties to the handler so it can be appended to the #fancybox-wrap container without issue like:

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 */

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

other properties can be cosmetic.

查看在这里工作 !!!

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

Once you complete and submit the form, the response will be a new fancybox with scroll bars that you can use independently from the easyDrag handler.

请随意分析代码并根据自己的需要进行自定义（并且不要忘记授予我赏金;）

Please feel free to analyze the code and customize it to your own needs (and don't forget to grant me the bounty ;)

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

UPDATE: Notice that since we are appending the handler to the #fancybox-wrap container every time we fire fancybox, then we need to remove it once we close fancybox using the onClosed callback, otherwise we will duplicate the handler if we open fancybox again with unexpected results:

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

我更新了我的DEMO 也是。

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

LAST NOTE: This solution is for fancybox v1.3.4.

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

I haven't tested it with v2.x but I don't see why it wouldn't work. Just make sure that you bind EasyDrag and append the handler to the .fancybox-wrap selector instead

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

您可以使用 afterShow 回调追加它的处理程序和 afterClose 删除它。

You may use the afterShow callback to append the handler to it and afterClose to remove it.

这篇关于Scrollbars的Jquery Fancybox可拖动问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！