jQuery UI sortable（） – listitem在Safari和Chrome中跃居榜首
我的页面底部有一个可排序的无序列表，在Firefox中非常适用。 然而，在Safari / Chrome中，当我想拖动时，抓取的listitem会立即跳到页面顶部，就像UL在窗口顶部一样。 有谁知道这里发生了什么？
谢谢。 莱克斯。
这是代码：
HTML（和PHP）：
<? foreach($downloads as $download) { echo "- id."' href='".$base_url."downloads/".$download->id."'>".$download->title."
"; } ?>
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' });
对我来说，问题来自于身体上的CSS溢出：
body { overflow-x: hidden; }
删除此行完全解决了问题。
我有同样的问题。 它在Firefox中运行良好，但在Safari和Chrome中不断跳跃。 我最后通过添加overflow: auto;修复它overflow: auto; 到我的CSS中的未排序列表。
我甚至不必指定UL的高度。
这是我在网上找到的解决方案……甚至可能在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' }); } } });
我有完全相同的问题，可排序的项目在Chrome中跳到顶部，而相同的代码在Firefox中正常工作。 问题是包含元素没有明确的高度。 一旦我为它添加了一个高度，该项目就不再跳跃了。
对我来说，这种情况正在发生，因为行位置上有一个过渡/动画集。 删除过渡修复了问题。
好像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 eg $("#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 eg $("#YourPanel").onscroll }; $("#YourSortablePanel").sortable({ start: function (event, ui) { $(document).scrollTop(tempScrollPosition); } });
如果您有’revert’选项，只需删除它或在可排序选项中设置’revert：false’。 这个对我有用。 谢谢。