jquery之如何使 Fancybox 版本 2 可拖动

我目前正在通过 fancybox 版本 2 开发的网站上有弹出窗口。我使用 fancybox 是因为我需要能够通过所述弹出窗口提交表单。

现在，我实际上找到了另一个线程，它使 fancybox 版本 1 能够与名为 easydrag 的 jquery 插件一起使用，但问题是在该版本中，虽然弹出窗口是可拖动的，但您无法与表单交互，这显然是一个大问题。知道有人让 fancybox 版本 1 可以拖动，这让我认为版本 2 也一定可以，而且最好使用 jqueryui 函数draggable()。

现在使用版本 1 解决方案，开发人员只需将可拖动属性分配给“.fancybox-outer”类即可，因为 fancbox outer 是父 div。然而，在版本 2 中，情况并非如此，因为 fancybox 外层隐藏在“.fancybox-wrap”和“.fancybox-skin”下，两者都不能代替“.fancybox-outer”。我什至进入 fancbox jquery 并将我自己的 id 添加到名为“#fancybox321”的“.fancybox-wrap”中 - 仍然不好。

如果有人有任何想法，我很乐意提供帮助。我制作的测试页的源代码如下。您可以在我的网站 http://lennoxwebdesign.com/test-draggable.php 上看到它的实际效果。 - 显然请确保您的浏览器允许弹出窗口。

<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>test-draggable</title> 
 
<script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> 
 
<script type="text/javascript" src="jquery.fancybox.js"></script> 
<link rel="stylesheet" type="text/css" href="jquery.fancybox.css" media="screen" /> 
 
<script type="text/javascript"> 
    $(document).ready(function() { 
 
        $('.fancybox').fancybox(); 
 
    }); 
 
 
</script> 
 
<script> 
  $(function() { 
    $( "#fancybox321" ).draggable(); 
  }); 
</script> 
 
</head> 
 
<body> 
 
 
 
<a class="fancybox fancybox.iframe" href="test-popup-form.php">popup</a> 
 
</body> 

请您参考如下方法:

如果您使用 jQuery-UI，您可以执行以下操作:

jQuery("#fancybox321").fancybox({ 
    beforeShow: function() { 
        this.wrap.draggable(); 
    } 
});