Éléments d'interface utilisateur jQuery déplaçables utilisant une position de départ incorrecte lors du défilement du navigateur?

Question

J'utilise jQuery 1.4.2 et jQuery UI 1.8.5 pour créer des éléments déplaçables qui retournent à leur position d'origine. Il y a un problème cependant; Lorsque vous avez fait défiler la fenêtre du navigateur, la position de départ sera modifiée pour commencer quelque part plus haut. On dirait qu'une position absolue est utilisée mais le montant qui a été défilé n'est pas pris en compte, mais je ne peux pas en être sûr. J'ai fait tout mon développement et mes tests dans FireFox.

Voici une courte vidéo que j'ai enregistré sur ce .. http://www.youtube.com/watch?v=KPW4ljpjuF8

Le code d'initialisation JavaScript ressemble à ceci ..

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

Le code HTML d'un des éléments ressemble à ceci ..

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

Et c'est le CSS qui va avec.

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

Aidez-moi à sortir! Je ne sais pas pourquoi cela arrive.

Answer 1

La réponse donnée complète ici: jQuery draggable shows helper in wrong place after page scrolled

C'est la solution qui a fonctionné pour moi:

Assurez-vous que l'élément parent (événement si c'est le corps) a overflow: auto; ensemble. Mon test a montré que cette solution corrige la position, mais elle désactive la fonctionnalité de défilement automatique. Vous pouvez toujours faire défiler en utilisant la molette de la souris ou les touches fléchées.