Pregunta sobre jquery, fancybox, javascript – Problema arrastrable de Jquery Fancybox con barras de desplazamiento

3

Estoy usando un fancybox con pluginjquery.easydrag.js. La razón de esto es poder arrastrar el fancybox alrededor.

Parece que funciona bien, pero el problema viene cuando el fancybox tiene barras de desplazamiento. Es decir. por ejemplo, al hacer clic en Enviar y no ingresar ningún campo, la validación en pantalla causa barras de desplazamiento. Lo cual normalmente está bien, pero las barras de desplazamiento causan todo tipo de problemas con la función que se puede arrastrar, de modo que cuando intento hacer clic en la barra de desplazamiento hacia arriba y hacia abajo, en realidad mueve todas las ventanas. Así que parece estar confundido sobre qué contenido se puede mover y qué hacer con una barra de desplazamiento.

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

EDITAR:

Me las arreglé para agregar algo para la entrada y las áreas de texto para ignorar el desplazamiento, ver más abajo ... solo me pregunto qué puedo hacer por las barras de desplazamiento.

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

Esta es el enlace a JS para el plugin easydrag

Oh yah, ya veo. El primero fue muy bonito y suave. El segundo ... no tanto ... ¿Ha intentado editar el CSS para el contenedor de fancybox y usar el desbordamiento: ninguno para eliminar las barras de desplazamiento, suponiendo que no las necesite? Reemplacé el desbordamiento automático en #fancy_ajax y eso pareció hacer que se comportara un poco mejor. jmort253
Hola Steve, sería de gran ayuda si también mostraras tu HTML, así que tenemos una idea de lo que estás haciendo con respecto al contenido. Gracias. jmort253
Básicamente se puede ver el problema de la barra de desplazamiento aquíjquery.diaz-cornen.com/fancybox/… en el segundo enlace, haga clic aquí para ver la película en un fancybox que se puede arrastrar - AJAX StevieB

Tu respuesta

4   la respuesta
9

primer ejemplo sobre cómo hacer fancybox draggable en 2009 para v1.2.1. Luego publiqué algunas notas para que funcione con v1.3.1como se ve aquí pero cuando se introdujo fancybox v1.3.4, eleasyDrag El complemento no funcionó tan bien como con las versiones anteriores y comenzó a comportarse con errores. No tuve tiempo de encontrar una solución ... así que simplemente lo dejé.

Sin embargo, la solución era simple: laeasyDrag plugin proporciona una manera de establecer un "entrenador de animales" como se explica aquí así que en lugar de sostener y arrastrar el conjunto#fancybox-wrap contenedor, que bloquea el acceso a las barras de desplazamiento, en su caso, simplemente arrastra la caja de luz desde un elemento definido específico. Talentrenador de animales puede ser añadido a#fancybox-wrap Selector y configurarlo dentro del complemento EasyDrag usando elonComplete Opción de API de devolución de llamada como:

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

Tenga en cuenta que puede usar cualquier elemento como controlador, en mi ejemplo usé un botón html, pero puede usar una imagen si lo prefiere. Lo importante es asignar el mínimo importante.css propiedades al manejador para que pueda ser anexado al#fancybox-wrap Contenedor sin problema como:

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

Otras propiedades pueden ser cosméticas.

Míralotrabajando aquí!!!

Una vez que complete y envíe el formulario, la respuesta será un nuevo fancybox con barras de desplazamiento que puede usar independientemente del controlador easyDrag.

Por favor, siéntase libre de analizar el código y personalizarlo según sus propias necesidades (y no olvide concederme la recompensa;)

ACTUALIZAR: Tenga en cuenta que ya estamos agregando el controlador a la#fancybox-wrap contenedor cada vez que disparamos fancybox, entonces necesitamos eliminarlo una vez que cerramos fancybox usando elonClosed devolución de llamada, de lo contrario duplicaremos el controlador si volvemos a abrir fancybox con resultados inesperados:

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

yo actualicemi DEMO también.

ÚLTIMA NOTA: Esta solución es para fancyboxv1.3.4.

No lo he probado conv2.x pero no veo por qué no funcionaría. Sólo asegúrate de que te atanEasyDrag y añadir el controlador a la.fancybox-wrap selector en su lugar

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

Usted puede usar elafterShow Devolución de llamada para agregar el controlador yafterClose para eliminarlo.

Gracias, el hombre funcionó gracias a su solución, ¡SetHandler hizo el truco! StevieB
¡Buen trabajo! La idea del "manejador" en realidad ha sido útil en otras áreas donde hay un comportamiento de buggy. Me estoy pateando un poco por no pensar en eso;) +1 jmort253
Gracias hombre, intentaré esto hoy, y si toda buena voluntad de recompensa recompensa! StevieB
0

me encontré con el problema de arrastrar un iframe. Para resolverlo, cambié a lajQuery 1.9.1 UI Plugin para arrastrar y crear una imagen transparente mientras se arrastra. Eliminar la imagen después de arrastrar para acceder al contenido. Funciona muy bien con el iframe de fancybox y permite un rápido arrastre sobre el iframe. Ver código de ejemplo a continuación.

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

or # fancybox-wrap junto con el complemento EasyDrag usando la API de devolución de llamada onComplete, encontré que esto funciona muy bien con el elemento de título fancybox 1.3.4 para crear un fancybox que se pueda arrastrar con funcionalidad de desplazamiento. Usando el título, no hay necesidad de eliminarlo después de cerrar.

 <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

combinación de Easydrag con Fancybox, deberá eliminar las barras de desplazamiento. Por defecto, la hoja de estilo CSS de Fancybox aplica laoverflow:auto gobierne el elemento, generado por Fancybox, que envuelve el contenido que se muestra dentro de Fancybox.

Para anularlo, incluye tu propia regla CSS que reemplaza a la que Fancybox aplica al contenedor. Coloque este bloque de estilo en el<head> sección de su página 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>

Esto eliminará las barras de desplazamiento y permitirá que el complemento de arrastre fácil funcione sin problemas.

Gracias por su solución, así jmort StevieB
por lo que entendí, necesitará las barras de desplazamiento para ver el contenido generado después de la función de validación. eliminar las barras de desplazamiento puede resolver un problema, pero puede crear otro. JFK
¡De nada! Lo siento, malinterpreté tu pregunta;) jmort253
@JFK: Sí, no lo detecté hasta 5 o 6 horas después. Planeo analizar esto más para ver si hay una manera de hacerlo funcionar con barras de desplazamiento. Si no, estoy seguro de que alguien encontrará esto útil, si no StevieB. Gracias por el seguimiento. jmort253

Preguntas relacionadas