Drag and drop jQuery user interface elements using wrong starting position when scrolling browser?

Question

I am using jQuery 1.4.2 and jQuery UI 1.8.5 to create draggable elements that return to their original position. However, there is a problem; when you scroll the browser window, the starting position will be changed to start somewhere higher. It seems that the absolute position is used, but the amount that was scrolled is not taken into account, but I can not be sure. I have completed all my development and testing in FireFox.

Here is a short video that I recorded about it. http://www.youtube.com/watch?v=KPW4ljpjuF8

The JavaScript initialization code is as follows.

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

HTML of one of the elements looks like this.

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

And this is CSS to go along with this.

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

, ! , .

Answer 1

: jQuery draggable

, :

, (, ) : auto; . , , . , .