Search jQuery

jQuery Forum

Sortable: Offset when element is dragged and page scrolled down (FF)

in Using jQuery UI • 11 years ago

Hi,

first of all kudos to the filament group and all people involved creating jquery UI - you rock, guys!

I'm using jquery 1.4.2 and jquery UI 1.8.. On my page I've got a sortable which workes like charme as long as I haven't touched the scrollbar of my page. When the scrollbar was moved down a bit, the sortable creates a offset to the mousepointer position when I start do drag it. This offset seems to have the same height as the height i moved the scrollbar down the page.

As said, when the page scrollbar is in its origin position after the page is loaded and i drag the sortable, than everything works perfect. No offset - the sortable is at the position where the mousepointer is, when I start to drag.

I have this issue in Firefox 3.6.3 Windows (and 3.5.9 ubuntu). In IE8 I have no problems. I haven't tested it in IE6+7, Chrome, Safari.

Maybe someone has a workaround or a fix?

Thanks
ninsky

Replies(8)

dominique..

Réf.: Sortable: Offset when element is dragged and page scrolled down (FF)

11 years ago

Hi,

Without the code or better a link to your page, it's hard to see what's happen. We have no way to reproduce your problem.

Regards,
Dominique VINCENT
http://www.toitl.com/
http://twitter.com/toitl

ninsky0815

Re: Sortable: Offset when element is dragged and page scrolled down (FF)

11 years ago

Hi Dominique,

tried to give an example via jsbin.com - however it didn't work correctly.

I reduced my JS code to a minimal and I found out that the described behaviour of the sortable only occurs, if the sortable is within a jquery ui tab! Without a surrounding tab widget it works as expected.

Update: similar Problem reported here:
http://osdir.com/ml/jquery-ui/2009-03/msg00856.html
http://osdir.com/ml/jquery-ui/2009-03/msg00854.html
http://stackoverflow.com/questions/2451528/jquery-ui-sortable-scroll-helper-element-offset-firefox-issue
http://old.nabble.com/Sortable-IE-scroll-offset-td16835977s27240.html

My HTML-Markup is a bit too large to post it here. But when I reduce it, its a simple unordered list. However, thats my minimal JS Code:

    $("#tabs").tabs({
        select: function(event, ui) {
            $("#statusboxSuccessful").remove();
        }
    });

    $("#tage ul").disableSelection();
    // Alle Sortables initialisieren
    $("#tage ul").sortable({axis:   'y',
                            containment: 'parent',
                            revert: 50,
                            tolerance: 'pointer',
                            cursor: 'move',

    });

ninsky0815

Re: Sortable: Offset when element is dragged and page scrolled down (FF)

11 years ago

Hi again,

I found out, that the strange behaviour is produced by the css class ".ui-tabs". If i delete the entry "position: relative" of this class with firebug I don't have this issue any more. For me it worked to override the position entry with "position: inherit".

Regards
ninsky

cnanney

Re: Sortable: Offset when element is dragged and page scrolled down (FF)

10 years ago

I'm still seeing this bug, and my sortable list is not inside a jQueryUI tab:

http://i.imgur.com/phYGO.gif

You can see that when scrolled all the way up, it works correctly. When I scroll down, the helper overlay is incorrectly offset.

$("#item_attributes_list").sortable({
    axis: 'y',
    handle: 'img',
    cursor: 'move',
    placeholder: 'item_attributes_list_placeholder',
    tolerance: 'pointer',
    opacity: 0.8
});
#item_attributes_list li{padding:3px 0}
.item_attributes_list_placeholder{background:#FDFFC7;width:100%;height:34px}

intellini..

Re: Sortable: Offset when element is dragged and page scrolled down (FF)

10 years ago

There's another thing that can also cause this issue: overflow-y: scroll;

If you've got the bug, and no parent container with position: relative, removing overflow-y: scroll solves the issue (if you've got that set in the first place, of course).

penuelr

Re: Sortable: Offset when element is dragged and page scrolled down (FF)

10 years ago

There is definitely an issue when one of the container/parent element (or divs) of the sortable has position:relative. I fixed the issue by setting position:inherit on the container element, as reported by @ninsky0815 in above posts. This problem appears in FF it works fine in chrome and IE without applying the above fix. so to summarize if you have html structure like

</div>

Then , make sure the parent elements don't have position:relative. I fixed the problem my changing the below css

#middle{ position:relative}

#middle{position:inherit}

and it worked perfectly even when the page had scrolls and scrolled after. Hope this helps someone.

falkon303

Re: Sortable: Offset when element is dragged and page scrolled down (FF)

10 years ago

This worked for me for fixing the HTML overflow-y issue. Just be sure you have no overflow-y set on the css of the html element, and also add the id tag to the HTML element, giving it the id of 'html'. I put this code right after the sortable element.

This way you can have the overflow bars only on the pages without the sortable element.

<script type="text/javascript">
if (!document.getElementById('your_sortable'))
{document.getElementById('html').style.overflowY = 'scroll';}
</script>

k7n4n5t3w..

Re: Sortable: Offset when element is dragged and page scrolled down (FF)

9 years ago

Well, that's ok. But I don't usually have styles on elements that I don't need. This works for me:

var userAgent = navigator.userAgent.toLowerCase();

if(userAgent.match(/firefox/)) {
    $( '#'+elm_id ).bind( "sortstart", function (event, ui) {
        ui.helper.css('margin-top', $(window).scrollTop() );
    });
    $( '#'+elm_id ).bind( "sortbeforestop", function (event, ui) {
        ui.helper.css('margin-top', 0 );
    });
}

Top Reply

Response title

Attachments

jQuery Forum

Sortable: Offset when element is dragged and page scrolled down (FF)

Replies(8)

Réf.: Sortable: Offset when element is dragged and page scrolled down (FF)

Re: Sortable: Offset when element is dragged and page scrolled down (FF)

Re: Sortable: Offset when element is dragged and page scrolled down (FF)

Re: Sortable: Offset when element is dragged and page scrolled down (FF)

Re: Sortable: Offset when element is dragged and page scrolled down (FF)

Re: Sortable: Offset when element is dragged and page scrolled down (FF)

Re: Sortable: Offset when element is dragged and page scrolled down (FF)

Re: Sortable: Offset when element is dragged and page scrolled down (FF)

Statistics

Tags

Actions