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

Posted 2023-05-08

【中文标题】JQuery UI .Sortable在溢出底部移动li时跳转

【英文标题】：JQuery UI .Sortable jumps when moving li at bottom of overflow

【发布时间】：2020-07-28 06:56:09

【问题描述】：

我查看了这个 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/

提前致谢！

【参考方案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 正常工作，您有时需要在元素上设置固定高度而不是自动高度，所以请考虑一下像这样。

【讨论】：

谢谢！我认为这成功了！我有几个地方需要添加这个。我怀疑它无法确定高度。谢谢！