Elementos de la interfaz de usuario jQuery arrastrables que utilizan una posición de inicio incorrecta cuando se desplaza el navegador?

Question

He estado usando jQuery 1.4.2 y jQuery UI 1.8.5 para crear elementos arrastrables que vuelven a su posición original. Sin embargo hay un problema; cuando haya desplazado la ventana del navegador, la posición de inicio se cambiará para comenzar en un lugar más alto. Parece que se usa una posición absoluta pero no se tiene en cuenta la cantidad que se ha desplazado, pero no estoy seguro. He hecho todo mi desarrollo y prueba en Firefox.

Aquí es un breve vídeo que he grabado sobre esto .. http://www.youtube.com/watch?v=KPW4ljpjuF8

El código de inicialización JavaScript parece a esto ..

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

El HTML de uno de los elementos tiene este aspecto ..

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

Y este es el CSS que lo acompaña.

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

Por favor, ¡ayúdenme! No sé por qué sucede esto.

Answer 1

Esto se responde ampliamente aquí: jQuery draggable shows helper in wrong place after page scrolled

Esta es la solución que funcionó para mí:

Asegúrese de que el elemento padre (evento si es el cuerpo) tiene overflow: auto; conjunto. Mi prueba mostró que esta solución corrige la posición, pero desactiva la funcionalidad de desplazamiento automático. Todavía puede desplazarse usando la rueda del mouse o las teclas de flecha.