jQuery UI sortable() - listitem 在 Safari 和 Chrome 中跳转到顶部

Posted 2023-02-24

【中文标题】jQuery UI sortable() - listitem 在 Safari 和 Chrome 中跳转到顶部

【英文标题】：jQuery UI sortable() - listitem jumps to top in Safari and Chrome

【发布时间】：2011-01-29 20:21:57

【问题描述】：

我的页面底部有一个可排序的无序列表，它在 Firefox 中完美运行。但是，在 Safari/Chrome 中，当我想要拖动它时，抓取的列表项会立即跳到页面顶部，就像 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'
);

【问题讨论】：

你能把代码贴在这里吗？这将有助于了解问题

我创建了一个 jsfiddle 来尝试重现：jsfiddle.net/ZMKGv/1。我没有看到您描述的问题，但您没有发布所有代码，因此问题可能出在其他地方。

【参考方案1】：

我遇到了同样的问题。它在 Firefox 中运行良好，但在 Safari 和 Chrome 中一直表现出色。 我终于通过将overflow: auto; 添加到我的 CSS 中的未排序列表来修复它。

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

【讨论】：

我将样式添加到容器元素中。这看起来对我来说也可以正常工作，而不是使用其他错误中提到的绝对位置。

谢谢！也适合我。

【参考方案2】：

对我来说，问题来自正文上的 css 溢出：

body  overflow-x: hidden; 

删除此行完全解决问题。

【讨论】：

谢谢。这让我发疯了。

谢谢。对我来说是 html overflow-y: scroll; 但是，是的，把它拿出来修复它。首次选择该项目时，它仍然会跳动一点，但现在效果好多了。

这行得通。但是，溢出线可能有另一个原因。如果您在下面看到，沃尔特的另一个答案 - 他的建议非常有效，不会打扰其他任何事情。

现在是 2018 年，这也是我的问题。非常感谢老兄！

【参考方案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' );
        
    
);

【讨论】：

$.browser 已从最新版本的 jquery 中删除。 api.jquery.com/jquery.browser

【参考方案4】：

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

【讨论】：

在 Safari 8.0.2 中使用 li (height: auto) 存在同样的问题。谢谢，对我有帮助！

【参考方案5】：

对我来说，这是因为在行位置设置了过渡/动画。删除转换解决了问题。

【参考方案6】：

似乎 jQuery UI 1.9.2 解决了这个问题。

如果您无法更改库，有一种解决方法，包括简单的滚动条操作。这个想法很简单：

每次滚动时保持上一个滚动位置。 开始拖动元素时将滚动设置回上一个位置。

给你;

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

【参考方案7】：

如果您有“还原”选项，只需将其删除或设置 '还原：假' 在可排序选项中。 这个对我有用。 谢谢。