Pytanie w sprawie javascript, fancybox, jquery – Problem z przeciąganiem Jquery Fancybox z paskami przewijania

3

Używam fancyboxa z wtyczkąjquery.easydrag.js. Powodem tego jest możliwość przeciągnięcia fancyboxa dookoła.

Wydaje się, że działa dobrze, ale problem pojawia się, gdy fancybox ma paski przewijania. To znaczy. na przykład po kliknięciu na przesyłanie i nie wprowadzaniu żadnych pól, valdidation na ekranie powoduje paski przewijania. Co jest w porządku, ale paski przewijania powodują różnego rodzaju problemy z funkcją przeciągania, więc gdy próbuję kliknąć pasek przewijania w górę iw dół, to faktycznie przesuwa całe okna. Wydaje się więc być mylone, co do treści, które można przenieść i co zrobić z paskiem przewijania.

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

EDYTOWAĆ :

Udało mi się dodać coś dla danych wejściowych i pól tekstowych, aby zignorować przewijanie, patrz poniżej ... Zastanawiam się, co mogę zrobić dla pasków przewijania.

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

To to link do wtyczki JS for easydrag

Cześć Steve, byłoby bardzo pomocne, gdybyś pokazał swój kod HTML, abyśmy mogli poczuć, co robisz po stronie treści. Dziękuję Ci. jmort253
Możesz tutaj zobaczyć problem z paskiem przewijaniajquery.diaz-cornen.com/fancybox/… na drugim łączu kliknij tutaj, aby zobaczyć film w przeciągalnym fancyboksie - AJAX StevieB
Oh tak, teraz widzę. Pierwszy był bardzo ładny i gładki. Drugi ... nie tak bardzo ... Próbowałeś edytować CSS dla kontenera fancybox i używać overflow: none, aby wyeliminować paski przewijania, zakładając, że ich nie potrzebujesz? Zastąpiłem auto overflow na #fancy_ajax i wydawało się, że zachowuje się trochę lepiej. jmort253

Twoja odpowiedź

4   odpowiedź
9

pierwszy przykład o tym, jak przywrócić fancybox w 2009 roku dla wersji 1.2.1. Potem zamieściłem kilka notatek, aby działało z v1.3.1jak widać tutaj ale kiedy wprowadzono fancybox v1.3.4, TheeasyDrag wtyczka nie działała tak sprawnie jak w poprzednich wersjach i zaczęła zachowywać się wadliwie. Nie miałem czasu znaleźć obejścia ... więc po prostu go upuszczam.

Rozwiązanie było jednak proste:easyDrag wtyczka umożliwia ustawienie „treser" jak wyjaśniono tutaj więc zamiast trzymać i przeciągać całość#fancybox-wrap kontener, który blokuje dostęp do pasków przewijania, jeśli w ogóle, po prostu przeciągnij lightbox z określonego zdefiniowanego elementu. Takitreser może być dołączony do#fancybox-wrap selektor i ustaw go w wtyczce EasyDrag za pomocąonComplete opcja API wywołania zwrotnego:

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

Zauważ, że możesz użyć dowolnego elementu jako handler, w moim przykładzie użyłem przycisku html, ale możesz użyć obrazka, jeśli jest to preferowane. Ważne jest, aby przypisać minimum ważnecss właściwości do obsługi, aby można było je dołączyć do#fancybox-wrap kontener bez problemu jak:

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

inne właściwości mogą być kosmetyczne.

Zobacz topracuję tutaj!!!

Gdy wypełnisz i prześlesz formularz, odpowiedzią będzie nowy fancybox z paskami przewijania, których możesz używać niezależnie od programu obsługi easyDrag.

Prosimy o przeanalizowanie kodu i dostosowanie go do własnych potrzeb (i nie zapomnij o przyznaniu mi nagrody;)

AKTUALIZACJA: Zauważ, że ponieważ dołączamy obsługę do#fancybox-wrap pojemnik za każdym razem, gdy odpalamy fancybox, musimy go usunąć, gdy zamkniemy fancybox za pomocąonClosed wywołanie zwrotne, w przeciwnym razie powielimy program obsługi, jeśli ponownie otworzymy okno fantazyjne z nieoczekiwanymi wynikami:

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

zaktualizowałemmoje DEMO zbyt.

OSTATNIA UWAGA: To rozwiązanie jest dla fancyboxv1.3.4.

Nie testowałem tegov2.x ale nie rozumiem, dlaczego to nie zadziałałoby. Upewnij się tylko, że się związałeśEasyDrag i dołącz obsługę do.fancybox-wrap zamiast tego selektor

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

Możesz użyćafterShow wywołanie zwrotne do dołączenia do niego procedury obsługiafterClose aby go usunąć.

Dzięki człowiekowi udało się to dzięki twojemu rozwiązaniu, SetHandler to zrobił! StevieB
Dobra robota! Pomysł „handler” faktycznie przydał się w niektórych innych obszarach, w których występuje błąd. Jestem trochę kopiąc siebie za to, że o tym nie myślę;) +1 jmort253
Dzięki, spróbuję tego dzisiaj i jeśli wszystko będzie dobrze, nagradzaj nagrodę! StevieB
0

Easydrag z Fancyboxem, musisz wyeliminować paski przewijania. Domyślnie arkusz stylów CSS Fancybox stosujeoverflow:auto reguła do elementu - generowanego przez Fancybox - który otacza zawartość wyświetlaną wewnątrz Fancybox.

Aby ją zastąpić, dołącz własną regułę CSS, która zastępuje tę, którą Fancybox stosuje do opakowania. Umieść ten blok stylów w<head> sekcja twojej strony internetowej:

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

Pozwoli to wyeliminować paski przewijania i sprawić, że łatwa do przeciągania wtyczka będzie działać płynnie.

@JFK - Tak, nie złapałem tego aż około 5 lub 6 godzin później. Planuję przyjrzeć się temu więcej, aby sprawdzić, czy istnieje sposób, aby działał z paskami przewijania. Jeśli nie, jestem pewien, że ktoś uzna to za przydatne, jeśli nie StevieB. Dzięki za kontynuację. jmort253
o ile zrozumiałem, będzie potrzebował pasków przewijania, aby zobaczyć treść wygenerowaną po funkcji walidacji. wyeliminowanie pasków przewijania może rozwiązać jeden problem, ale może stworzyć inny problem. JFK
Dzięki za twoje rozwiązanie i jmort StevieB
Nie ma za co! Przepraszam, że źle odczytałem twoje pytanie; jmort253
2

aby dodać program obsługi dla selektora # fancybox-wrap wraz z wtyczką EasyDrag za pomocą interfejsu zwrotnego onComplete, stwierdziłem, że działa to dobrze z elementem tytułowym fancybox 1.3.4, aby utworzyć przeciągalny fancybox z funkcją przewijania. Używając tytułu, nie ma potrzeby usuwania go po zamknięciu.

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

ramki iframe. Aby rozwiązać problem, przełączyłem się najQuery 1.9.1 UI wtyczka do przeciągania i tworzenia przezroczystego obrazu podczas przeciągania. Usuń obraz po przeciągnięciu, aby uzyskać dostęp do zawartości. Świetnie współpracuje z ramką iframe fancybox i umożliwia szybkie przeciąganie nad ramką iframe. Zobacz przykładowy kod poniżej.

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

Powiązane pytania