Angular Ngx Scrollbar：带纵向滚动子列的横向拖拽问题

问题核心 #

带纵向滚动的子列会优先捕获拖拽事件，导致父横向滚动容器无法响应拖拽时的边缘滚动，同时拖拽跨列动作被中断。下面是针对性的原生API解决方案：

1. 拦截子滚动容器的默认拖拽行为 #

给所有带纵向滚动的子列容器绑定dragover和dragenter事件，阻止浏览器默认的滚动触发逻辑，同时允许事件冒泡到父容器：

// 替换为你的子列滚动容器选择器
document.querySelectorAll('.column-scroll').forEach(container => {
  container.addEventListener('dragover', (e) => {
    e.preventDefault(); // 阻止子容器触发默认滚动
    // 不要调用stopPropagation，让事件传递到父横向滚动容器
  });
  container.addEventListener('dragenter', (e) => {
    e.preventDefault(); // 避免子容器捕获拖拽焦点
  });
});

2. 手动实现父容器的横向边缘滚动 #

在Ngx Scrollbar的父滚动容器上监听dragover事件，根据鼠标位置触发横向滚动，确保拖拽跨列时父容器能自动滚动：

// 替换为你的Ngx Scrollbar父容器选择器（注意：Ngx Scrollbar的滚动层通常是内部的.content或类似节点）
const parentScroll = document.querySelector('.ngx-scrollbar .ngx-scrollbar-content');
const scrollSpeed = 12; // 滚动速度，可调整
const edgeThreshold = 40; // 触发滚动的边缘距离

parentScroll.addEventListener('dragover', (e) => {
  const rect = parentScroll.getBoundingClientRect();
  const mouseX = e.clientX - rect.left;

  // 左边缘触发向左滚动
  if (mouseX < edgeThreshold) {
    parentScroll.scrollBy({ left: -scrollSpeed, behavior: 'instant' });
  }
  // 右边缘触发向右滚动
  if (mouseX > rect.width - edgeThreshold) {
    parentScroll.scrollBy({ left: scrollSpeed, behavior: 'instant' });
  }
});

3. 优化拖拽元素的层级与事件 #

给拖拽元素添加CSS层级，避免被子容器滚动层遮挡，同时确保dragstart事件正常初始化：

.draggable-item {
  z-index: 9999;
  cursor: grab;
  user-select: none; /* 避免拖拽时选中文本 */
}
.draggable-item:active {
  cursor: grabbing;
}

// 拖拽元素的dragstart事件初始化
document.querySelectorAll('.draggable-item').forEach(item => {
  item.addEventListener('dragstart', (e) => {
    // 原生拖拽必须设置dataTransfer，否则部分浏览器不生效
    e.dataTransfer.setData('text/plain', item.id);
    // 可选：设置拖拽时的预览样式
    e.dataTransfer.effectAllowed = 'move';
  });
});

额外注意事项 #

• 若使用Angular框架，建议在组件的ngAfterViewInit钩子中执行事件绑定，确保DOM元素已渲染完成。
• 注意Ngx Scrollbar的DOM结构，不同版本的内部滚动容器类名可能不同，需根据实际DOM结构调整选择器。
• 测试时覆盖主流浏览器（Chrome、Firefox、Edge），部分浏览器对拖拽事件的默认处理存在差异。

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