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

Question

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

// 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 函数中将高度重置为自动。

这是更新后的 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正常工作，有时您需要在元素上设置固定高度而不是自动高度，所以这样想。

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

JQuery UI .Sortable jumps when moving li at bottom of overflow

css

jquery

jquery-ui

jquery-ui-sortable