Elementi di interfaccia utente jQuery trascinabili che utilizzano una posizione di avvio errata durante lo scorrimento del browser?

Question

Ho utilizzato jQuery 1.4.2 e jQuery UI 1.8.5 per creare elementi trascinabili che tornano alla loro posizione originale. C'è un problema però; quando hai fatto scorrere la finestra del browser, la posizione iniziale verrà modificata per iniziare da qualche parte più in alto. Sembra che venga utilizzata una posizione assoluta ma l'importo che è stato fatto scorrere non viene preso in considerazione, ma non posso esserne sicuro. Ho fatto tutto il mio sviluppo e test in FireFox.

Ecco un breve video che ho registrato su questo .. http://www.youtube.com/watch?v=KPW4ljpjuF8

Il codice di inizializzazione JavaScript simile a questo ..

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

Il codice HTML di uno degli elementi assomiglia a questo ..

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

E questo è il CSS ad andare d'accordo.

.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; 
      } 

Per favore aiutatemi! Non so perché questo sta accadendo.

Answer 1

questo è risposto esaurientemente qui: jQuery draggable shows helper in wrong place after page scrolled

Questa è la correzione che ha lavorato per me:

Assicurarsi che l'elemento padre (evento se è il corpo) ha overflow: auto; impostato. Il mio test ha mostrato che questa soluzione corregge la posizione, ma disabilita la funzionalità di autoscroll. Puoi ancora scorrere usando la rotellina del mouse o i tasti freccia.