react-big-scheduler拖拽至滚动区域外日期定位错误求助

问题复现 #

• 使用react-big-scheduler管理日程事件，拖拽事件到需滚动才能显示的日期区域时，事件无法被放置到目标日期（例如季度视图下，拖拽1月1日的事件到1月3日，松开后会定位到错误日期）
• 切换到维护分支后问题仍存在；参照react-dnd相关issue添加isDragging方法后，出现滚动无法停止的异常，原因是该方法始终返回true

解决方案 #

1. 修复拖拽日期定位错误 #

问题根源是拖拽时未将容器的滚动偏移量纳入坐标计算，导致日期判断偏差。修改src/DnDDropTarget.js中的位置处理逻辑：

// 在处理拖拽位置的方法中（如handleOver或handleDrop）
handleOver: (props, monitor, component) => {
  const { clientX } = monitor.getClientOffset();
  // 获取日程容器的滚动偏移量
  const schedulerContainer = document.querySelector('.scheduler-container');
  const scrollLeft = schedulerContainer ? schedulerContainer.scrollLeft : 0;
  // 计算目标日期时加入滚动偏移
  const adjustedX = clientX + scrollLeft;
  const targetDate = component.getDateFromClientX(adjustedX);
  
  // 后续使用targetDate进行日期更新逻辑
}

注：若容器选择器不同，需替换为实际的日程容器类名或ID。

2. 修复滚动无法停止的异常 #

原isDragging方法逻辑存在缺陷，导致拖拽结束后仍返回true，触发持续滚动。修改src/DnDSource.js中的isDragging方法：

isDragging: (props, monitor) => {
  // 拖拽已结束时直接返回false
  if (monitor.didDrop()) {
    return false;
  }
  const draggedItem = monitor.getItem();
  const currentItem = props.event;
  
  // 仅当当前项与拖拽项匹配时返回true
  return currentItem && draggedItem 
    && currentItem.id === draggedItem.id 
    && currentItem.resourceId === draggedItem.resourceId;
}

同时确保beginDrag方法返回明确的拖拽项属性，避免引用混乱：

beginDrag: (props) => {
  const event = props.event;
  return {
    id: event.id,
    resourceId: event.resourceId,
    start: event.start,
    end: event.end
  };
}

3. 视图适配优化（针对季度/月视图） #

对于宽时间范围视图，需确保日期计算逻辑匹配视图的时间刻度缩放比例，可在getDateFromClientX方法中加入视图类型判断，调整坐标到日期的转换系数。

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