3

プラグイン付きのfancyboxを使用していますjquery.easydrag.js。これは、ファンシーボックスをドラッグできるようにするためです。

正常に動作しているようですが、ファンシーボックスにスクロールバーがある場合に問題が発生します。たとえば、送信をクリックしてフィールドに入力しない場合、画面の検証によりスクロールバーが発生します。これは通常は問題ありませんが、スクロールバーはドラッグ可能な機能であらゆる種類の問題を引き起こすため、スクロールバーを上下にクリックしようとすると、実際にはウィンドウ全体が移動します。そのため、移動できるコンテンツとスクロールバーの処理方法について混乱しているようです。

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

編集 ：

スクロールを無視するために、入力領域とテキスト領域に何かを追加することができました。以下を参照してください...スクロールバーに対して何ができるのか疑問に思っています。

                $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();
            });

これはeasydragプラグインのJSへのリンクです

4

4 に答える 4

9

2009年にv1.2.1でfancyboxをドラッグ可能にする方法に関する最初の例を投稿しました。次に、ここに示すようにv1.3.1で動作するようにいくつかのメモを投稿しましたが、fancybox v1.3.4が導入されたとき、easyDragプラグインは以前のバージョンほどスムーズに動作せず、バグが発生し始めました。回避策を見つける時間がありませんでした...だから私はそれをドロップします。

ただし、解決策は単純でした。easyDragプラグインは、ここで説明するように「ハンドラー」を設定する方法を提供するため、コンテナー全体を保持してドラッグする代わりに、スクロールバーへのアクセスをブロックし、特定の定義済み要素からライトボックスをドラッグするだけです。 。このようなハンドラーはセレクターに追加し、次のようなコールバックAPIオプションを使用してEasyDragプラグイン内に設定できます。#fancybox-wrap#fancybox-wraponComplete

'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();
}

デモも更新しました。

最後の注意：このソリューションはfancyboxv1.3.4用です。

v2.xでテストしていませんが、なぜ機能しないのかわかりません。代わりEasyDragに、ハンドラーをバインドしてセレクターに追加するようにしてください.fancybox-wrap

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

コールバックを使用してafterShow、ハンドラーを追加しafterCloseたり削除したりできます。

于 2012-05-28T09:00:32.790 に答える
2

上記のソリューションを使用して、onCompleteコールバックAPIを使用するEasyDragプラグインとともに＃fancybox-wrapセレクターのハンドラーを追加すると、これがfancybox 1.3.4 title要素とうまく機能して、スクロール機能を備えたドラッグ可能なfancyboxを作成できることがわかりました。タイトルを使用すると、閉じた後に削除する必要はありません。

 <script type="text/javascript" src="@Url.Content("~/fancybox/jquery.mousewheel-3.0.4.pack.js")"></script>
 <script type="text/javascript" src="@Url.Content("~/fancybox/jquery.fancybox-1.3.4.pack.js")"></script> 
 <script src="@Url.Content("~/Scripts/jquery.easydrag.handler.beta2.js")" type="text/javascript"></script> 
 <script>    
     //Fancybox
     $(document).ready(function () {            
         $("#iframeVideoPop").fancybox({
             'width': 890,
             'height': 595,
             'type': 'iframe',
             'autoScale': 'false',
             'hideOnContentClick': false,
             'onComplete': function() {
                  //Style the title where and how you want it
                  $("#fancybox-title").css({'top':'-20px', 'bottom':'auto'});
                  //Set the fancybox-title as the handler
                  $("#fancybox-wrap").setHandler('fancybox-title');
               }
         });

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

     }); //ready
 <script>
于 2012-11-14T21:19:09.503 に答える
0

EasydragとFancyboxの組み合わせによって引き起こされるスクロールバーの問題を解消するには、スクロールバーを排除する必要があります。デフォルトでは、Fancybox CSSスタイルシートは、overflow:autoFancybox内に表示されるコンテンツをラップする要素（Fancyboxによって生成される）にルールを適用します。

これをオーバーライドするには、Fancyboxがラッパーに適用するルールに優先する独自のCSSルールを含めます。このスタイルブロックを<head>Webページのセクションに配置します。

<style>

    /* id of the element generated and used by Fancybox as a wrapper around
       the generated content. */
    #fancy_ajax {
        /* Use the important identifier to ensure the overflow:auto is suppressed */
        overflow:none !important;

    }
</style>

これにより、スクロールバーがなくなり、簡単なドラッグプラグインがスムーズに機能するようになります。

于 2012-05-26T03:50:22.837 に答える
0

これらのソリューションをテストした後、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("<img src='@Url.Content("~/Content/Images/transparent.png")' id='hidenImg' style='border: 1px solid black; width: 640px; height: 400px; top: 20px; position: absolute; z-index: 10000;' />")}, 
                        drag: function(ev,ui){}, 
                        stop: function(ev, ui){$("#fancybox-wrap #hidenDiv").remove()} 
                  });  
                }
         });
于 2012-11-16T02:43:52.333 に答える