I have been using jQuery 1.4.2 and jQuery UI 1.8.5 to create draggable elements that revert back to their original position. There is a problem though; when you've scrolled the browser window the start position will be changed to start somewhere higher. It looks like an absolute position is used but the amount that has been scrolled is not taken into consideration, but I cannot be sure. I have done all my development and testing in FireFox.

Here is a short video that I have recorded about this..

The JavaScript initialization code looks like this..

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

The 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 the CSS to go along with it.

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

Please help me out! I don't know why this is happening.

I have been using jQuery 1.4.2 and jQuery UI 1.8.5 to create draggable elements that revert back to their original position. There is a problem though; when you've scrolled the browser window the start position will be changed to start somewhere higher. It looks like an absolute position is used but the amount that has been scrolled is not taken into consideration, but I cannot be sure. I have done all my development and testing in FireFox.

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

The JavaScript initialization code looks like this..

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

The 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 the CSS to go along with it.

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

Please help me out! I don't know why this is happening.

• javascript
• jquery
• jquery-ui
• draggable

Share Improve this question Follow asked Oct 14, 2010 at 7:45 DeathspikeDeathspike 8,80066 gold badges4747 silver badges8383 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

This is answered prehensively here: jQuery draggable shows helper in wrong place after page scrolled

This is the fix which worked for me:

Make sure the parent element (event if it's the body) has overflow:auto; set. My test showed that this solution fixes the position, but it disables the autoscroll functionality. You can still scroll using the mousewheel or the arrow keys.