使用Scrollbars的Jquery Fancybox可拖动问题

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

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

  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插件提供了一种设置“ 处理程序 ”的方法， easyDrag 解释的那样，而不是保持和拖动整个#fancybox-wrap容器，阻止访问滚动条（如果有的话），只需拖动灯箱来自特定的定义元素。 这样的处理程序可以附加到#fancybox-wrap选择器，并使用onComplete回调API选项在EasyDrag插件中设置它，如：

 'onComplete': function(){ // append the handler on the top-left corner of fancybox $("#fancybox-wrap").append("Drag me"); // 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 */ 

其他属性可以是化妆品。

看到它在这里工作 !!!

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

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

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

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

我也更新了我的DEMO 。

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

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

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

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

Answer 2

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

Answer 3

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

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

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

Answer 4

在测试这些解决方案之后，我遇到了拖动iframe的问题。 为了解决这个问题，我转而使用jQuery 1.9.1 UI插件进行拖动，并在拖动时创建透明图像。 拖动后删除图像以访问内容。 适用于fancybox 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("")}, drag: function(ev,ui){}, stop: function(ev, ui){$("#fancybox-wrap #hidenDiv").remove()} }); } });