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

问题描述：

在使用jQueryUI拖放功能进行排序时，当被拖放的元素拖出了可视区域，会出现页面滚动条并限制文档的高度和宽度。在该场景下，很可能出现无法执行拖放排序的小bug。

解决方案：

1. 原理

通过监测鼠标位置和滚动条位置，当出现滚动条时，动态调整排序元素的位置，避免出现滚动条阻止元素拖动的情况。

1. 代码

// 监听鼠标拖拽事件
$('.sortable').sortable({
  helper: 'clone',
  placeholder: 'placeholder',
  start: function(e, ui) {
    var startPos = ui.helper.offset();
    var docHeight = $(document).height();
    var docWidth = $(document).width();
    var scrollTop = $(window).scrollTop();
    var scrollLeft = $(window).scrollLeft();

    // 增加占位元素
    $(this).find('.placeholder').css({
      height: ui.helper.outerHeight(),
      width: ui.helper.outerWidth()
    });

    // 动态调整拖拽元素的位置
    $(this).bind('mousemove', function(e) {
      if (e.pageX > docWidth - 50 - scrollLeft) {
        $(this).scrollLeft($(this).scrollLeft() + 50);
      } else if (e.pageX < 50) {
        $(this).scrollLeft($(this).scrollLeft() - 50);
      }

      if (e.pageY > docHeight - 50 - scrollTop) {
        $(this).scrollTop($(this).scrollTop() + 50);
      } else if (e.pageY < scrollTop + 50) {
        $(this).scrollTop($(this).scrollTop() - 50);
      }
    });
  },
  stop: function(e, ui) {
    // 移除占位元素
    $(this).find('.placeholder').remove();

    // 解除事件绑定
    $(this).unbind('mousemove');
  }
});

1. 示例

假设这里有一个待排序的列表，通过使用拖拽排序的方式进行调整。当拖动到列表的边缘区域时，会出现滚动条，并在滚动条区域内拖动排序元素时，会发现无法进行排序。此时可以使用上述代码解决该问题，动态调整排序元素的位置，避免滚动条的干扰。

另外，如果想了解更多关于jQueryUI拖放排序的实现细节，可以查看官方文档，其中包含了详细的示例和说明。