Draggable jQuery UI elements using wrong start position when browser is scrolled?

Question

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.com/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.

score 4 · Accepted Answer · edited May 23 '17 at 12:34

4

This is answered comprehensively 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.

edited May 23 '17 at 12:34

Community

1
1

answered Jul 12 '11 at 17:31

seb303

56
2

This fixes it for me too, thanks. Of course I don't want overflow auto on the ul parent element so will have to experiment - curses! – Iain Collins Dec 21 '12 at 00:47
As using overflow had other undesirable consequences in my case and I'm using sortable and have ended up going with a helper on that page provided in an answer by @mordy. Lame comment editing timeout just triggered 1 second before I hit save. :/ – Iain Collins Dec 21 '12 at 00:56
1

This contains the draggable to the container (with scrollbars) for me. I used helper:"clone", this worked – Jeroen K Sep 26 '13 at 14:35

Draggable jQuery UI elements using wrong start position when browser is scrolled?

1 Answers1