Frage an jquery, fancybox, javascript – Jquery Fancybox Draggable Problem mit Bildlaufleisten

3

Ich benutze eine Fancybox mit Pluginjquery.easydrag.js. Der Grund dafür ist, dass Sie die Fancybox verschieben können.

Es scheint gut zu funktionieren, aber das Problem tritt auf, wenn die Fancybox über Bildlaufleisten verfügt. Das heißt Wenn Sie zum Beispiel auf "Senden" klicken und keine Felder eingeben, führt die Validierung auf dem Bildschirm zu Bildlaufleisten. Das ist normalerweise in Ordnung, aber die Bildlaufleisten verursachen alle möglichen Probleme mit der Funktion zum Ziehen, sodass beim Versuch, auf die Bildlaufleiste nach oben und unten zu klicken, das gesamte Fenster verschoben wird. Es scheint also verwirrt zu sein, welche Inhalte verschoben werden können und was mit einer Bildlaufleiste zu tun ist.

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

EDIT:

Es ist mir gelungen, etwas für Eingaben und Textbereiche hinzuzufügen, um das Scrollen zu ignorieren (siehe unten). Ich habe mich nur gefragt, was ich für Bildlaufleisten tun kann.

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

Diese ist der Link zu JS für das easydrag Plugin

Hallo Steve, es wäre sehr hilfreich, wenn du auch deinen HTML-Code zeigen würdest, damit wir ein Gefühl dafür bekommen, was du inhaltlich machst. Vielen Dank. jmort253
Oh ja, ich verstehe jetzt. Das erste war sehr schön und glatt. Die zweite ... nicht so sehr ... Haben Sie versucht, das CSS für den Fancybox-Container zu bearbeiten und Überlauf zu verwenden: Keine, um die Bildlaufleisten zu entfernen, vorausgesetzt, Sie brauchen sie nicht? Ich habe Overflow Auto auf #fancy_ajax ersetzt und das schien es ein bisschen besser zu machen. jmort253
Grundsätzlich können Sie das Problem mit der Bildlaufleiste hier sehenjquery.diaz-cornen.com/fancybox/… Klicken Sie auf den zweiten Link, um den Film in einer ziehbaren Fancybox zu sehen - AJAX StevieB

Deine Antwort

4   die antwort
0

Nach dem Testen dieser Lösungen stieß ich auf das Problem mit dem Ziehen eines Iframes. Um das zu lösen, wechselte ich zumjQuery 1.9.1-Benutzeroberfläche Plugin zum Ziehen und erstellt beim Ziehen ein transparentes Bild. Entfernen Sie das Bild nach dem Ziehen, um auf den Inhalt zuzugreifen. Funktioniert hervorragend mit fancybox iframe und ermöglicht schnelles Ziehen über den iframe. Siehe Beispielcode unten.

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

erstes Beispiel darüber, wie man fancybox 2009 für v1.2.1 ziehbar macht. Dann habe ich ein paar Notizen gepostet, damit es mit v1.3.1 funktioniertwie hier gesehen aber als fancybox v1.3.4 eingeführt wurde, wurde dieeasyDrag Das Plugin funktionierte nicht so reibungslos wie in den Vorgängerversionen und hat sich fehlerhaft verhalten. Ich hatte keine Zeit, einen Workaround zu finden ... also lasse ich ihn einfach fallen.

Die Lösung war jedoch einfach: dieeasyDrag Plugin bietet eine Möglichkeit, ein "Handler" wie hier erklärt also anstatt das ganze zu halten und zu ziehen#fancybox-wrap Container, der den Zugriff auf die Bildlaufleisten blockiert, ziehen Sie einfach die Lightbox aus einem bestimmten definierten Element. Eine solcheHandler kann angehängt werden#fancybox-wrap Selektor und setzen Sie ihn im EasyDrag Plugin mit demonComplete Callback API Option wie:

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

Beachten Sie, dass Sie jedes Element als Handler verwenden können. In meinem Beispiel habe ich eine HTML-Schaltfläche verwendet, aber Sie können ein Bild verwenden, wenn Sie dies bevorzugen. Das Wichtigste ist, das Minimum wichtig zuzuweisencss Eigenschaften an den Handler übergeben, damit er an den Handler angehängt werden kann#fancybox-wrap Behälter ohne Ausgabe wie:

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 */

andere Eigenschaften können kosmetisch sein.

Seht es euch anhier arbeiten!!!

Sobald Sie das Formular ausgefüllt und gesendet haben, wird die Antwort eine neue Fancybox mit Bildlaufleisten sein, die Sie unabhängig vom easyDrag-Handler verwenden können.

Bitte analysieren Sie den Code und passen Sie ihn an Ihre Bedürfnisse an (und vergessen Sie nicht, mir das Kopfgeld zu gewähren;)

AKTUALISIEREN: Beachten Sie, dass wir seit dem Anhängen des Handlers an die#fancybox-wrap Jedes Mal, wenn wir die Fancybox abfeuern, müssen wir sie entfernen, sobald wir die Fancybox mit der Taste schließenonClosed Rückruf, andernfalls duplizieren wir den Handler, wenn wir fancybox erneut mit unerwarteten Ergebnissen öffnen:

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

Ich habe aktualisiertmeine DEMO auch.

LETZTE ANMERKUNG: Diese Lösung ist für Fancyboxv1.3.4.

Ich habe es nicht mit getestetv2.x aber ich verstehe nicht, warum es nicht funktionieren würde. Stellen Sie einfach sicher, dass Sie bindenEasyDrag und füge den Handler an den an.fancybox-wrap Selektor statt

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

Sie können dieafterShow Rückruf, um den Handler daran anzuhängen undafterClose es zu entfernen.

Dank Ihrer Lösung hat es funktioniert, der SetHandler hat es geschafft! StevieB
Vielen Dank, Mann, ich werde es heute versuchen, und wenn alle guten Willen ofc Kopfgeld belohnen! StevieB
Gute Arbeit! Die "Handler" -Idee hat sich tatsächlich in einigen anderen Bereichen als nützlich erwiesen, in denen es zu fehlerhaftem Verhalten kommt. Ich mache mir einen Kick, weil ich nicht daran gedacht habe;) +1 jmort253
0

das durch die Kombination von Easydrag mit Fancybox verursacht wird, müssen Sie die Bildlaufleisten entfernen. Standardmäßig wendet das Fancybox CSS-Stylesheet das anoverflow:auto Regel für das von Fancybox generierte Element, das den in der Fancybox angezeigten Inhalt umschließt.

Fügen Sie zum Überschreiben eine eigene CSS-Regel hinzu, die diejenige ersetzt, die Fancybox auf den Wrapper anwendet. Setzen Sie diesen Stilblock in das<head> Abschnitt Ihrer Webseite:

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

Dadurch werden die Bildlaufleisten entfernt und das einfache Drag-Plugin funktioniert problemlos.

Bitte! Entschuldigung, ich habe deine Frage falsch verstanden;) jmort253
Soweit ich verstanden habe, benötigt er die Bildlaufleisten, um den nach der Validierungsfunktion generierten Inhalt zu sehen. Das Entfernen der Bildlaufleisten kann ein Problem lösen, aber ein anderes Problem verursachen. JFK
Danke auch für deine Lösung jmort StevieB
@JFK - Ja, das habe ich erst 5 oder 6 Stunden später bemerkt. Ich habe vor, dies genauer zu untersuchen, um festzustellen, ob es eine Möglichkeit gibt, es mit Bildlaufleisten zum Laufen zu bringen. Wenn nicht, wird das sicher jemand nützlich finden, wenn nicht StevieB. Vielen Dank für das Follow-up. jmort253
2

Unter Verwendung der obigen Lösung zum Hinzufügen eines Handlers für den # Fancybox-Wrap-Selektor zusammen mit dem EasyDrag-Plugin unter Verwendung der Callback-API onComplete stellte ich fest, dass dies mit dem Titelelement fancybox 1.3.4 gut funktioniert, um eine ziehbare Fancybox mit Bildlauffunktion zu erstellen. Wenn Sie den Titel verwenden, müssen Sie ihn nach dem Schließen nicht mehr entfernen.

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

Verwandte Fragen