javascript 可在可滚动容器中排序的 JQuery UI - 排序时滚动位置“跳跃”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9448574/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JQuery UI sortable in a scrollable container - scroll position "jumps" when sorting
提问by Eran Medan
Please check this almost identical question first: jQuery Sortable List - scroll bar jumps up when sorting
请先检查这个几乎相同的问题：jQuery Sortable List - scroll bar jumps up when sort
I have exactly the same problem, only that I tried all the suggested solutions there with no luck
我有完全相同的问题，只是我在那里尝试了所有建议的解决方案但没有运气
Here is the way to reproduce
这是重现的方法
- create a sortable list
- have it scrollable
- scroll down
- reorder items
- scroll position "jumps" up
- 创建一个可排序的列表
- 让它可滚动
- 向下滚动
- 重新排序项目
- 滚动位置“跳”起来
Here is the code (see also in JSFiddle)
这是代码（另见JSFiddle）
Html
html
<ul id="panel" class="scroll">
<li class="content" style="background-color:red">item1</li>
<li class="content" style="background-color:green">item2</li>
<li class="content" style="background-color:blue">item3</li>
<li class="content" style="background-color:gray">item4</li>
<li class="content" style="background-color:yellow">item5</li>
</ul>?
JavaScript
JavaScript
$(function() {
$("#panel").sortable({
items: ".content",
forcePlaceholderSize: true
}).disableSelection();
$(".content").disableSelection();
});?
CSS
CSS
.scroll{
overflow: scroll;
border:1px solid red;
height: 200px;
width: 150px;
}
.content{
height: 50px;
width: 100%;
}
?
Here is the code (in JSFiddle) after trying the notion of the accepted answer(with no luck)
这是尝试接受的答案的概念后的代码（在JSFiddle 中）（没有运气）
I can try to understand why it happens (list get's "shortened" for a quick second), but all attempts to use placeholders or helpers to avoid it didn't work either. I feel I tried almost any permutation of the "scrollable" options with no luck
我可以尝试理解为什么会发生这种情况（列表 get 会“缩短”一秒钟），但是所有使用占位符或助手来避免它的尝试也没有奏效。我觉得我尝试了几乎所有“可滚动”选项的排列，但都没有运气
Browsers I tried
我试过的浏览器
IE9, Firefox 10.0.1, and Chrome 17
IE9、Firefox 10.0.1 和 Chrome 17
JQuery versions
jQuery 版本
core 1.7.1, UI v 1.8.17
核心 1.7.1，用户界面 v 1.8.17
Am I doing something wrong? Is there a solution? Could it be a bug?
难道我做错了什么？有解决办法吗？这可能是一个错误吗？
采纳答案by Mark Schultheiss
If you modifiy your CSS for the .scrollelement by adding:
如果您.scroll通过添加以下内容来修改元素的CSS ：
position:relative;
That should resolve this issue.
那应该可以解决这个问题。
回答by Dennis
Adding overflow-y:scrollto the sortable list even without the heightproperty solved it for me. It only shows a disabled scrollbar, but that's okay.
overflow-y:scroll即使没有该height属性，也可以添加到可排序列表中为我解决了这个问题。它只显示禁用的滚动条，但没关系。
回答by Kwan Ung Park
??? ??? ?? ? ????? ?? ???.
？？？？？？?? ? ????? ?? ？？？。
var cY = -1;
var base = 0;
$("").sortable({
sort: function(event, ui) {
var nextCY = event.pageY;
if(cY - nextCY < -10){
if(event.clientY + ui.helper.outerHeight(true) - 20 > document.body.clientHeight) {
base = base === 0 ? event.clientY : base;
var move = event.clientY - base;
var curScrollY = $(document).scrollTop();
$(document).scrollTop(curScrollY + move+3);
base = event.clientY;
}
}
},
// .....
});
回答by Barry Guvenkaya
Seems like jQuery UI 1.9.2solved the issue.
似乎jQuery UI 1.9.2解决了这个问题。
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);
}
});
回答by RaphKomjat
This is caused by the height of the container changing when sorting (just before the placeholder is created)
这是由于排序时容器的高度发生变化引起的（就在创建占位符之前）
The problem is well described and answered in this stack overflow : https://stackoverflow.com/a/32477389/2604980
这个问题在这个堆栈溢出中得到了很好的描述和回答：https: //stackoverflow.com/a/32477389/2604980
回答by micronx
For me this sortable options were working if you don't want to remove overflow css from body:
对我来说，如果您不想从正文中删除溢出的 css，则此可排序选项有效：
start(e, ui) {
if (fixOffset) ui.item.css('transform', `translateY(${document.body.scrollTop}px)`);
fixOffset = true;
},
change(e, ui) {
ui.item.css('transform', `translateY(${document.body.scrollTop}px)`);
},
stop(e, ui) {
ui.item.css('transform', 'translateY(0)');
},
