jQuery UI sortable() - listitem jumps to top in Safari and Chrome

I have a sortable unordered list on the bottom of my page, which works perfect in Firefox. However, in Safari/Chrome the grabbed listitem jumps instantly to the top of the page when I want to drag it, like the UL is on top of the window. Does anyone know what's going on here?

Thanks. Lex.

Here's the code:

HTML (and PHP):

<ul id="list">
    <?
        foreach($downloads as $download)
        {
            echo "<li class='downloads'><a rel='".$download->id."' href='".$base_url."downloads/".$download->id."'>".$downlo开发者_StackOverflow社区ad->title."</a></li>";
        }
    ?>
</ul>

CSS:

ul#list {
    padding: 10px 0;
    display: block;
}
ul#list li {
    background: #fff;
    padding: 10px;
    color: #bc1e2c;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    font-weight: bold;
    margin: 10px 0;
    display: block;
}

ul#list li:hover {
    background: #212121;
    color: #fff;
    cursor: move;
}

JS:

$(".alter-content ul#list").sortable({
    update : saveSortorder,
    containment: 'parent'
});

I had the same problem. It worked well in Firefox but kept jumping in Safari and Chrome. I finally fixed it by adding overflow: auto; to the unsorted list in my CSS.

I didn't even have to specify the height of the UL.

For me, the problem came from css overflow on body :

body { overflow-x: hidden; }

Removing this line completely fix the problem.

Here is the fix I found somewhere online... maybe even on SO. Works for me.

elements.itemList.sortable({
    'start': function (event, ui) {
        //jQuery Ui-Sortable Overlay Offset Fix
        if ($.browser.webkit) {
            wscrolltop = $(window).scrollTop();
        }
    },
    'sort': function (event, ui) {
        //jQuery Ui-Sortable Overlay Offset Fix
        if ($.browser.webkit) {
            ui.helper.css({ 'top': ui.position.top + wscrolltop + 'px' });
        }
    }
});

I had the exact same problem with sortable items jumping to the top in Chrome while the same code worked fine in Firefox. The issue was the containing element had no explicit height. Once I added a height to it, the item no longer jumped around.

For me this was happening because there was a transition/animation set on the row position. Removing the transition fixed the problem.

Seems like jQuery UI 1.9.2 solved the issue.

If you are unable to change the library, there's a workaround including a simple scroll bar operation. The idea is simple:

• Keep the previous scroll position every time you scroll.
• Set scroll back to the previous position when you start dragging your element.

Here you go;

var lastScrollPosition = 0; //variables defined in upper scope
var tempScrollPosition = 0;

window.onscroll = function () { // Up to you requirement you may change it to another elemnet e.g $("#YourPanel").onscroll
    clearTimeout($.data(this, 'scrollTimer'));
    $.data(this, 'scrollTimer', setTimeout(function () {
        tempScrollPosition = lastScrollPosition; // Scrolls don't change from position a to b. They cover some numbers between a and b during the change to create a smooth sliding visual. That's why we pick the previous scroll position with a timer of 250ms.
    }, 250));

    lastScrollPosition = $(document).scrollTop(); // Up to you requirement you may change it to another elemnet e.g $("#YourPanel").onscroll
};

$("#YourSortablePanel").sortable({
    start: function (event, ui) {
        $(document).scrollTop(tempScrollPosition);
    }
});

If you have 'revert' option just remove it or set 'revert: false' in the sortable options. It works for me. Thanks.