带sticky header的表格拖拽元素实现平滑上下滚动方案

问题分析 #

你的代码存在以下几个导致滚动异常的问题：

1. dragover事件会被频繁触发，每次调用animate都会添加到动画队列，造成卡顿和拖拽结束后持续滚动
2. 直接使用event.target.offsetTop计算滚动位置，没有考虑页面顶部固定的#secondHeader高度，导致滚动位置偏差
3. 没有根据拖拽方向判断滚动逻辑，向上滚动时无法正确触发

解决方案 #

修改JS代码，优化滚动逻辑，终止动画队列，添加拖拽结束时的清理操作，同时根据鼠标位置智能触发滚动：

var index = 0;
var dragSrcEl = null;
var row = 1;
var lastDragOver = null;
// 固定头部高度，根据实际情况调整
const fixedHeaderHeight = document.getElementById('secondHeader').offsetHeight;
// 滚动触发的边缘阈值（视口上下各10%）
const scrollThreshold = window.innerHeight * 0.1;

$(document).ready(function() {
  $('.event').on("dragstart", function(event) {
    var dt = event.originalEvent.dataTransfer;
    dt.setData('Text', $(this).attr('id'));
  });

  $('table td').on("drop", function(event) {
    event.preventDefault();
    // 清除所有滚动动画
    $('html, body').stop(true);
    $('.highlight').removeClass('highlight');
    var data = event.originalEvent.dataTransfer.getData('Text');
    if ($(this).find('.event').length === 0) {
      $('#' + data).detach().appendTo($(this));
    }
  });

  $('table td').on("dragover", function(event) {
    event.preventDefault();
    event.target.classList.add("highlight");
    
    const mouseY = event.originalEvent.clientY;
    const currentScrollTop = $(window).scrollTop();
    
    // 向上滚动：鼠标靠近视口顶部
    if (mouseY < scrollThreshold) {
      $('html, body').stop(true, false).animate({
        scrollTop: currentScrollTop - 50
      }, 30);
    }
    // 向下滚动：鼠标靠近视口底部
    else if (mouseY > window.innerHeight - scrollThreshold) {
      $('html, body').stop(true, false).animate({
        scrollTop: currentScrollTop + 50
      }, 30);
    }
  });

  $('table td').on("dragleave", function(event) {
    event.preventDefault();
    event.target.classList.remove("highlight");
  });

  // 拖拽结束时清除所有滚动动画
  $('.event').on("dragend", function() {
    $('html, body').stop(true);
    $('.highlight').removeClass('highlight');
  });
});

关键优化点 #

• stop(true, false)：终止所有未完成的动画队列，避免卡顿和持续滚动
• 根据鼠标位置触发滚动：只在鼠标靠近视口边缘时滚动，减少不必要的动画触发
• 拖拽结束时清理动画：确保拖拽完成后页面立即停止滚动
• 滚动步长固定为50px，配合30ms的动画时长，保证滚动平滑自然

其他说明 #

• CSS和HTML部分保持原有代码即可，无需修改
• 如果固定头部高度有变化，可调整fixedHeaderHeight变量的值
• 可根据需求修改scrollThreshold（滚动触发阈值）和滚动步长，调整滚动灵敏度

内容的提问来源于stack exchange，提问作者muhammad Yousaf