Scrollbars的Jquery Fancybox可拖动问题

Question

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

它似乎工作正常,但问题来自fancybox有滚动条.即,例如,当单击提交而不输入任何字段时,屏幕上的valdidation会导致滚动条.这通常很好,但滚动条会导致可拖动功能的各种问题,因此当我尝试上下滚动滚动条时,它实际上会移动整个窗口.因此,似乎对于可以移动哪些内容以及如何处理滚动条感到困惑.

        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的东西忽略滚动看到下面...只是想知道我可以为滚动条做什么.

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

Answer 1

我发布了第一个关于如何在2009年为v1.2.1制作fancybox draggable的例子.然后我发布了一些注释以使其与v1.3.1一起工作,如此处所示,但是当引入fancybox v1.3.4时,easyDrag插件的工作方式与以前的版本一样顺畅,并且开始出现bug.我没有时间找到解决方法......所以我放弃它.

解决方案很简单: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-wrap每次触发fancybox时都会将处理程序附加到容器,因此我们需要在使用onClosed回调关闭fancybox 后将其删除,否则如果我们再次打开fancybox并出现意外结果,我们将复制处理程序:

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

我也更新了我的DEMO.

最后说明:此解决方案适用于fancybox v1.3.4.

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

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

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