Przeciąganie elementów jQuery UI przy użyciu niewłaściwej pozycji początkowej podczas przewijania przeglądarki?

Question

Używam jQuery 1.4.2 i jQuery UI 1.8.5 do tworzenia przeciągalnych elementów, które powracają do pierwotnej pozycji. Jest jednak pewien problem; kiedy przewiniesz okno przeglądarki, pozycja początkowa zostanie zmieniona, aby zacząć gdzieś wyżej. Wygląda na to, że używana jest pozycja bezwzględna, ale kwota, która została przewinięta, nie jest brana pod uwagę, ale nie mogę być tego pewna. Wykonałem wszystkie swoje prace rozwojowe i testowe w FireFox.

Oto krótki film, który mam nagrany na ten temat .. http://www.youtube.com/watch?v=KPW4ljpjuF8

kodu JavaScript inicjalizacji wygląda następująco ..

$('.frameworkNavigationItem').draggable({ 
     appendTo : 'body', 
     revert : 'invalid', 
     containment : 'body', 
     zIndex : 999 
    }); 

HTML jednego z elementów wygląda tak ..

<div class="frameworkNavigationItem frameworkNavigationItemColor"> 
    <div class="frameworkNavigationItemName">Home</div> 
    <div class="frameworkNavigationItemDisplay"> 
     <input type="checkbox" checked="true" name="2_1"> 
     <input type="checkbox" checked="true" name="2_2"> 
     <input type="checkbox" checked="true" name="2_4"> 
    </div> 
    <div class="frameworkNavigationItemController"> 
     <input type="text" maxlength="255" value="mainNews" name="2_co"> 
    </div> 
    <div class="frameworkNavigationItemChild"> 
     <select name="2_ch"> 
      <option value="0">-</option> 
     </select> 
    </div> 
    <div style="clear: both;"></div>   
</div> 

I to jest CSS, aby się z tym zgodzić.

.frameworkNavigationItem 
    { 
     background-color   : #CACACA; 
     height      : 20px; 
     line-height     : 20px; 
     margin      : 2px 0; 
     vertical-align    : middle; 
    } 

     .frameworkNavigationItem:hover 
     { 
      background-color   : #BABABA; 
     } 

      .frameworkNavigationItem:hover input, .frameworkNavigationItem:hover select 
      { 
       background-color   : #BABABA; 
      } 

     .frameworkNavigationItem input, .frameworkNavigationItem select 
     { 
      background-color   : #CACACA; 
      border      : 0; 
      font-size     : 10px; 
     } 

     .frameworkNavigationItemColor 
     { 
      background-color   : #DADADA; 
     } 

      .frameworkNavigationItemColor input, .frameworkNavigationItemColor select 
      { 
       background-color   : #DADADA; 
      } 

     .frameworkNavigationItemName 
     { 
      float      : left; 
      height      : 15px; 
      padding-left    : 5px; 
     } 

     .frameworkNavigationItemDisplay 
     { 
      float      : right; 
      text-align     : right; 
      width      : 48px; 
     } 

     .frameworkNavigationItemController 
     { 
      float      : right; 
      width      : 160px; 
     } 

      .frameworkNavigationItemController input 
      { 
       width     : 150px; 
      } 

     .frameworkNavigationItemChild 
     { 
      float      : right; 
      width      : 160px; 
     } 

      .frameworkNavigationItemChild select 
      { 
       width     : 150px; 
      } 

Proszę mi pomóc! Nie wiem, dlaczego tak się dzieje.

Answer 1

ten odpowiedział wyczerpująco tutaj: jQuery draggable shows helper in wrong place after page scrolled

Jest to dylemat, który pracował dla mnie:

Upewnij elementu nadrzędnego (zdarzenie, czy jest to ciało) posiada overflow: auto; zestaw. Mój test pokazał, że to rozwiązanie poprawia pozycję, ale wyłącza funkcję automatycznego przewijania. Nadal możesz przewijać za pomocą kółka myszy lub klawiszy strzałek.