jQueryUI 拖放排序遇到滚动条时有可能无法执行排序的小bug及解决方案-前端开发

如何解决jQueryUI 拖放排序遇到滚动条时有可能无法执行排序的小bug？以下是解决方案：

如何解决jQueryUI 拖放排序遇到滚动条时有可能无法执行排序的小bug？以下是解决方案：

问题描述

在使用jQueryUI的sortable插件实现拖放排序时，当排序列表的高度超过容器的高度时，容器会出现纵向滚动条。此时，如果将拖拽元素往容器底部拖动，当拖动到容器底部超出可视范围时，容器会自动向下滚动，但是Sortable并没有正确计算滚动后鼠标所在位置，导致拖拽元素移动不了。

解决方案

方案一：

目前已知的解决该问题的一种方案是通过设置scrollSensitivity参数的值，使sortable在移动拖拽元素时能够正确计算鼠标位置，从而解决无法拖动的问题。

scrollSensitivity参数的作用是设置拖动元素离容器边缘的距离多少时，容器开始滚动。

示例一：

<div class="container">
  <ul class="sortable">
    <li>item 1</li>
    <li>item 2</li>
    <!-- ... -->
  </ul>
</div>

<script>
$(document).ready(function () {
  $('.sortable').sortable({
    axis: 'y',
    scroll: true,
    scrollSensitivity: 100, // 设置scrollSensitivity的值
    // ...其他配置...
  });
});
</script>

在示例一中，我们设置了scrollSensitivity参数的值为100，即拖拽元素距离容器底部不足100像素时，容器开始向下滚动。在实际使用中，需要根据实际情况调整该参数的值。

方案二：

另外一种解决该问题的思路是通过在鼠标拖拽到容器底部时，通过JavaScript代码模拟鼠标滚动事件，从而实现容器的自动滚动。

scrollTop属性表示容器顶端距离容器内部滚动条顶端的距离。
scrollHeight属性表示容器的总高度，包括不可见部分的高度。

示例二：

<div id="container">
  <ul class="sortable">
    <li>item 1</li>
    <li>item 2</li>
    <!-- ... -->
  </ul>
</div>

<script>
$(document).ready(function () {
  $('#container').on('mousemove', function (e) {
    var container = $(this),
        sortable = $('.sortable', container),
        scrollTop = container.scrollTop(),
        scrollHeight = container.prop('scrollHeight'),
        containerHeight = container.height(),
        mouseY = e.clientY - container.offset().top;

    if (mouseY > containerHeight - 20 && scrollTop + containerHeight < scrollHeight) {
      container.scrollTop(scrollTop + 20); // 模拟鼠标向下滚动20px
    }
  });

  $('.sortable').sortable({
    axis: 'y',
    // ...其他配置...
  });
});
</script>