Question

我的页面底部有一个可排序的无序列表，在Firefox中非常适用。但是，在Safari / Chrome中，当我想拖动时，抓取的listitem会立即跳到页面顶部，就像UL在窗口顶部一样。有谁知道这里发生了什么？

感谢。莱克斯。

以下是代码：

HTML（和PHP）：

<ul id="list">
    <?
        foreach($downloads as $download)
        {
            echo "<li class='downloads'><a rel='".$download->id."' href='".$base_url."downloads/".$download->id."'>".$download->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'
});

Answer 1

我遇到了同样的问题。它在Firefox中运行良好，但在Safari和Chrome中不断跳跃。我最后通过将overflow: auto;添加到我的CSS中的未排序列表来修复它。

我甚至不必指定UL的高度。

Answer 2

对我来说，问题来自身体上的css溢出：

body { overflow-x: hidden; }

删除此行可以完全解决问题。

Answer 3

这是我在网上找到的修复程序......甚至可能在SO上。适合我。

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' });
        }
    }
});

Answer 4

我有完全相同的问题，可排序的项目在Chrome中跳到顶部，而相同的代码在Firefox中运行良好。问题是包含元素没有明确的高度。一旦我为它添加了一个高度，该项目就不再跳跃了。

Answer 5

对我而言，这种情况正在发生，因为行位置上有一个过渡/动画集。删除过渡修复了问题。

Answer 6

如果你有＆＃39;还原＆＃39;选项只是删除它或设置＆＃39; revert：false＆＃39; 在可排序的选项中。这个对我有用。感谢。

jQuery UI sortable（） - listitem在Safari和Chrome中跃居榜首

6 个答案: