Jquery Draggable no posiciona correctamente las barras de desplazamiento

Necesito hacer un visor de imágenes que permita cargar imágenes grandes en un contenedor y luego arrastrarlas dentro del contenedor para que toda la imagen sea visible pero la imagen nunca se arrastre fuera de límites. El código siguiente funciona perfectamente, excepto que las barras de desplazamiento no se sincronizan con precisión con la posición de la imagen arrastrada y permiten que la imagen se desplace fuera de los límites. ¿Cómo puedo sincronizar las barras de desplazamiento con la imagen mientras se está arrastrando?Jquery Draggable no posiciona correctamente las barras de desplazamiento

Editar:

Here es un ejemplo de trabajo

<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
     <title></title> 
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js"></script> 
     <style> 
      .container{margin: auto;cursor: move;width: 80%; position: relative; min-width:885px;} 
      #screen{overflow:auto; width: 80%; height: 600px; clear: both; border: 1px solid black; background-color: #CCCCCC; float:left; margin-right: 15px;} 
     </style> 
    </head> 
    <body> 
      <div class="container"> 
       <div id="screen"> 
        <img class="drag-image" id="draggable" /> 
       </div> 
      </div> 
    </body> 
    </html> 

    <script type="text/javascript"> 

     $(function() { 

      $('#draggable').attr('src', 'http://i.imgur.com/uPjIz.jpg').load(function() { 
       CreateDraggablePicture(); 
      }); 

     }); 

     function CreateDraggablePicture() { 

      var x = ($('#draggable').width() - $('#screen').width() - $('#screen').offset().left) * -1; 
      var y = ($('#draggable').height() - $('#screen').height() - $('#screen').offset().top) * -1; 
      var x2 = $('#screen').offset().left; 
      var y2 = $('#screen').offset().top; 

      $("#draggable").draggable({ containment: [x, y, x2, y2], scroll: true }); 

     } 

    </script>

Fuente

2012-03-14 Coltech

Es la secuencia de comandos fuera de la etiqueta a propósito? ¿o es solo para representar un archivo js externo? –

@Eran Está ahí solo para representar un archivo js externo – Coltech

Gracias, traté de jugar en JSFiddle (http://jsfiddle.net/GNv3T/8/) y tampoco pude hacerlo funcionar, pero hay un buen El plugin lo hace bastante bien, así que abandoné el impulso de intentar encontrar una solución JQuery UI única ... –

Estos plugins parece hacer el mismo efecto que describir aquí

http://www.azoffdesign.com/overscroll (parece ser el mejor)
http://hitconsultants.com/dragscroll_scrollsync/scrollpane.html (no encontré el enlace de descarga)
http://the-taylors.org/jquery.kinetic/ (no vi una opción para las barras de desplazamiento, pero es amigable móvil)

Fuente

2012-03-17 00:57:58

Gracias por esto. Esto me da una alternativa y si no obtengo otras respuestas, te la otorgaré. En este punto, solo tengo curiosidad por saber por qué el complemento JQuery Draggable no sincroniza las barras de desplazamiento como el complemento que proporcionó. – Coltech

Estoy siguiendo esta pregunta, estaré muy contento de ver una solución arrastrable, o al menos una buena explicación de por qué no funciona. –

Tenía este problema exacto con un plugin de jQuery similares. Finalmente tuve que descubrir y modificar manualmente las matemáticas del complemento. Creo que el secreto fue que le faltaban los márgenes CSS o el relleno CSS del cálculo.

ver si eso ayuda

Fuente

2012-03-17 10:26:19 badunk

¿Tiene una solicitud de horquilla GH para la solución? –

no, lo siento, ¡ni siquiera se me ocurrió! – badunk

Jquery Draggable no posiciona correctamente las barras de desplazamiento

Respuesta

Cuestiones relacionadas