Les éléments d'interface utilisateur de jQuery utilisent une position de départ erronée lorsque le navigateur défile ?

Question

J'ai utilisé jQuery 1.4.2 et jQuery UI 1.8.5 pour créer des éléments glissants qui reviennent à leur position initiale. Il y a cependant un problème : lorsque vous avez fait défiler la fenêtre du navigateur, la position de départ est modifiée pour commencer plus haut. Il semble qu'une position absolue soit utilisée mais que la quantité de défilement ne soit pas prise en compte, mais je n'en suis pas sûr. J'ai fait tout mon développement et mes tests avec FireFox.

Voici une courte vidéo que j'ai enregistrée à ce sujet. 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 de l'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 voici 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, s'il vous plaît ! Je ne sais pas pourquoi cela se produit.

Answer 1

La réponse à cette question est détaillée ici : jQuery draggable affiche l'aide au mauvais endroit après le défilement de la page

Voici la solution qui a fonctionné pour moi :

Assurez-vous que l'élément parent (event s'il s'agit du body) a un overflow:auto ; défini. Mon test a montré que cette solution corrige la position, mais qu'elle désactive la fonctionnalité de défilement automatique. Vous pouvez toujours faire défiler la page à l'aide de la molette de la souris ou des touches fléchées.