Jquery Przeciąganie nieprzesuwnych pasków pozycjonujących

Potrzebuję zrobić przeglądarkę obrazów, która pozwoli załadować duże obrazy do kontenera, a następnie przeciągnąć je do wnętrza kontenera, aby cały obraz był widoczny, ale obraz nigdy nie jest przeciągany poza granice. Poniższy kod działa idealnie, z wyjątkiem pasków przewijania, które nie są dokładnie synchronizowane z pozycją przeciągniętego obrazu i pozwalają na przewinięcie obrazu poza granice. Jak mogę zsynchronizować paski przewijania z obrazem podczas przeciągania?Jquery Przeciąganie nieprzesuwnych pasków pozycjonujących

Edit:

Here jest przykładem pracy

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

Źródło

2012-03-14 Coltech

Czy skrypt poza znacznikiem celowo? czy jest to tylko w celu zobrazowania zewnętrznego pliku js? –

@Eran Jest tam po to, aby zobrazować zewnętrzny plik JS – Coltech

Dzięki, próbowałem grać w JSFiddle (http://jsfiddle.net/GNv3T/8/) i nie mogłem go uruchomić, ale jest fajny plugin, który robi to całkiem dobrze, więc porzuciłem chęć, aby spróbować znaleźć jedyne rozwiązanie JQuery UI ... –

Te wtyczki wydaje się zrobić ten sam efekt można opisać tutaj

http://www.azoffdesign.com/overscroll (wydaje się być jednym z najlepszych)
http://hitconsultants.com/dragscroll_scrollsync/scrollpane.html (Nie znalazłem jednak odnośnika do pobrania)
http://the-taylors.org/jquery.kinetic/ (nie widoczna opcja przewijania, ale to mobilna przyjazny)

Źródło

2012-03-17 00:57:58

Dzięki za to. To daje mi alternatywę i jeśli nie otrzymam innych odpowiedzi, przyznam ci to. W tym momencie jestem tylko ciekawy, dlaczego wtyczka JQuery Draggable nie zsynchronizuje pasków przewijania, takich jak wtyczka, którą podałeś. – Coltech

Podążam za tym pytaniem, będę bardzo szczęśliwy, widząc rozwiązanie dające się przeciągnąć lub przynajmniej dobre wyjaśnienie, dlaczego to nie działa. –

miałem dokładnie ten problem podobny plugin jQuery. W końcu musiałem wymyślić i ręcznie zmodyfikować matematykę wtyczki. Wierzę, że sekretem było to, że brakowało marginesów css lub css padding z obliczeń.

zobacz czy to pomaga

Źródło

2012-03-17 10:26:19 badunk

Czy masz żądanie widelca GH dotyczące poprawki? –

Nie, przykro mi, to nawet mnie nie przyszło! – badunk

Jquery Przeciąganie nieprzesuwnych pasków pozycjonujących

Odpowiedz

Powiązane problemy