5

現在、fancybox のバージョン 2 で開発しているサイトにポップアップがあります。上記のポップアップを介してフォームを送信できるようにする必要があるため、fancybox を使用しています。

さて、fancybox バージョン 1 を easydrag という jquery プラグインで動作させる別のスレッドを実際に見つけましたが、問題はそのバージョンでは、ポップアップはドラッグ可能でしたが、フォームを操作できなかったことです。大きな問題。誰かが fancybox バージョン 1 をドラッグ可能にしたことを知ると、バージョン 2 でも可能であるに違いないと思います。理想的には jqueryui 関数の draggable() を使用します。

バージョン 1 のソリューションでは、開発者はドラッグ可能なプロパティを「.fancybox-outer」クラスに割り当てるだけで機能しました。fancbox のアウターが親 div だったからです。しかしバージョン 2 ではそうではなく、fancybox のアウターは ".fancybox-wrap" と ".fancybox-skin" の下に埋もれており、どちらも ".fancybox-outer" の代わりには機能しません。私はfancbox jqueryに入り、「#fancybox321」と呼ばれる「.fancybox-wrap」に自分のIDを追加しましたが、まだうまくいきません。

誰かが何かアイデアを持っているなら、私は助けたいです。私が作ったテストページのソースコードは以下です。私のウェブサイト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>
4

2 に答える 2

5

jQuery-UI を使用している場合は、次のことができます。

jQuery("#fancybox321").fancybox({
    beforeShow: function() {
        this.wrap.draggable();
    }
});
于 2014-04-04T13:26:46.670 に答える
-3

これを試しましたか??

<script src="jquery.easydrag.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
    // add drag and drop functionality to fancybox
    $("#fancy_outer").easydrag();
});
</script>

わたしにはできる。

于 2015-11-16T07:34:33.857 に答える