JQuery Пользовательский интерфейс. Сортируемые прыжки при перемещении li в нижней части переполнения

Question

Я просмотрел несколько похожих случаев этого прыжка JQueryUI .sortable li, но, похоже, ничего похожего. У меня есть динамический список c, который увеличивается и уменьшается по мере того, как пользователи добавляют и удаляют элементы. Если он удерживается сверху, он плавно перемещает предметы. Как только я помещаю его в переполнение, когда вы прокручиваете все до конца и перемещаете элемент списка, элемент списка переходит, как будто он прилипает к нижней части списка. В некоторых случаях вы можете полностью потерять элемент списка и несколько раз переместить указатель мыши, чтобы он снова стал видимым. Я предполагаю, что это как-то связано с относительной высотой контейнера, в котором он находится?

// 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, затем сбросьте высоту до автоматической во время функции запуска сортируемой функции.

Вот обновленная скрипка .

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

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

});

Я не совсем понимаю , почему это работает, но я знаю, что для обеспечения правильной работы некоторых css иногда вам нужно иметь фиксированную высоту элементов, а не автоматическую высоту, поэтому подумайте об этом так.