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

Question

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

// 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

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

在 mousedown 函数期间设置固定高度，然后在 sortable start 函数期间将高度重置为 auto。

这是更新后的fiddle。

// find elements
$(document).ready(function() {

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

});

我不太明白为什么这行得通，但我知道要让某些 css 正常工作，您有时需要在元素上设置固定高度而不是自动高度，所以请考虑一下像这样。