JQueryUI.Sortable在溢出底部移动li时跳转

Question

我已经查看了JQueryUI.sortable li移动跳转的多个类似案例，但似乎没有相似之处。我有一个动态列表，它随着用户添加和删除项目而增长和收缩。如果它保持在顶部，它可以平稳地移动项目。当你滚动到底部并移动列表项时，一旦我将其放入溢出，列表项就会跳起来，就像它粘在列表的底部一样。在某些情况下，您可能会完全丢失列表项，并且必须将鼠标移动几次才能使其再次可见。我假设这与它所在容器的相对高度有关？

// find elements
$(document).ready(function() {
$('.sortable_List').sortable({
axis: 'y',
});
});

body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
.sortable_List {
list-style-type: none;
}
.list_item {
line-height: 40px;
border: 1px solid black;
background-color: white;
}
.container {
overflow-y: scroll;
height: 500px;
overflow-x: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class='container'>
<ul class='sortable_List'>
<li class='list_item'>This is a List Item</li>
<li class='list_item'>This is a List Item</li>
<li class='list_item'>This is a List Item</li>
<li class='list_item'>This is a List Item</li>
<li class='list_item'>This is a List Item</li>
<li class='list_item'>This is a List Item</li>
<li class='list_item'>This is a List Item</li>
<li class='list_item'>This is a List Item</li>
<li class='list_item'>This is a List Item</li>
<li class='list_item'>This is a List Item</li>
<li class='list_item'>This is a List Item</li>
<li class='list_item'>This is a List Item</li>
<li class='list_item'>This is a List Item</li>
<li class='list_item'>This is a List Item</li>
<li class='list_item'>This is a List Item</li>
<li class='list_item'>This is a List Item</li>
<li class='list_item'>This is a List Item</li>
<li class='list_item'>This is a List Item</li>
<li class='list_item'>This is a List Item</li>
<li class='list_item'>This is a List Item</li>
<li class='list_item'>This is a List Item</li>
</ul>
</div>

我创建了一个JSfiddle作为示例：https://jsfiddle.net/Kradenko/8L47rc05/13/

提前感谢！

Answer 1

在可滚动容器中排序时，可排序列表需要固定的高度。

在鼠标按下功能期间设置固定高度，然后在可排序启动功能期间将高度重置为自动。

这是最新的小提琴。

// find elements
$(document).ready(function() {
$('.sortable_List').mousedown(function() {
$(this).height($(this).height());
}).sortable({
axis: 'y',    
start: function(event, ui) {
$(this).height('auto');
}
});
});

我不太理解为什么这样做，但我知道要使某些css正常工作，有时需要在元素上设置固定高度，而不是自动高度，所以这样想吧。