Php jQuery sortable的可拖动图像位置错误

我有一个表格来改变db中图像的顺序。代码如下：

index.css

#gallery {
  width: 1057px;
  margin: 0 auto;
}

#image-list {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

#image-list li {
  margin: 10px 20px 10px 0px;
  display: inline-block;
}

#image-list li img {
  width: 300px;
}

#image-container {
  margin-bottom: 14px;
}

index.php

<form id="image-container" action="" method="post">
    <ul id="image-list">
    <?php foreach ($final_array as $image): ?>
        <?php echo '<li id="image_' . $image['id'] . '">
            <input id="' . $image['name'] . '" name="deletebox[]" value="' . $image['name'] . '" type="checkbox"> 
            <label for="' . $image['name'] . '"> 
               <img src="' . $targetDir . $image['name'] . '"/>
            </label>
        </li>' ?>
    <?php endforeach; ?>
   </ul>

问题是-当页面未滚动时，相对于鼠标光标的可拖动图像位置是正确的

但是如果用户向下滚动页面（可能有几十行图像），可拖动图像的位置是错误的，事实上，它看起来比应该的位置高100-200px：

---

我找不到调试它的方法。从哪里开始查找？

向上。这真的是未知行为吗？我是第一个发现它的人。这真的是未知行为吗？我是第一个发现它的人？

$(document).ready(function () {
    let dropIndex;
    $("#image-list").sortable({
        update: function (event, ui) {
            dropIndex = ui.item.index();
        }
    });
    $('#submit').click(function (e) {
        e.preventDefault();
        let imageIdsArray = [];
        $('#image-list li').each(function () {
          let id = $(this).attr('id');
          let split_id = id.split("_");
          imageIdsArray.push(split_id[1]);
        });
    $.ajax({......