Fullcalendar 3.9.0触摸设备拖拽删除事件功能异常求助

我帮你梳理下这个问题的常见原因和解决方案——FullCalendar 3.x在触摸设备上的拖拽逻辑确实和桌面端有差异，尤其是依赖jQuery UI的部分，很容易踩坑。

核心原因分析 #

你的代码在桌面端正常，但触摸设备失效，大概率是两个问题：

1. jQuery UI默认不支持触摸拖拽：FullCalendar 3.x的拖拽功能依赖jQuery UI，但原生jQuery UI并没有适配触摸事件，导致触摸设备上拖拽事件无法正常触发或结束。
2. isElemOverDiv()函数不兼容触摸坐标：这个自定义判断函数如果只处理了鼠标事件的pageX/pageY，触摸事件的坐标获取方式完全不同，会导致“是否拖拽到删除区域”的判断失效。

分步解决方案 #

1. 引入jQuery UI Touch Punch库 #

这是让jQuery UI支持触摸拖拽的关键补丁，必须在jQuery和jQuery UI之后引入：

<!-- 先引入jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- 再引入jQuery UI -->
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<!-- 最后引入Touch Punch -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>

注意：如果是本地引入，要确保文件顺序正确，Touch Punch必须在jQuery UI之后加载。

2. 修改isElemOverDiv()函数兼容触摸事件 #

把你的判断函数改成同时支持鼠标和触摸坐标的版本：

function isElemOverDiv(jsEvent) {
  var trashEl = $('#trash'); // 替换成你的删除区域选择器
  var offset = trashEl.offset();
  offset.right = offset.left + trashEl.outerWidth();
  offset.bottom = offset.top + trashEl.outerHeight();
  
  // 兼容鼠标与触摸事件的坐标获取
  var x, y;
  if (jsEvent.type.includes('touch')) {
    // 触摸事件：取第一个触摸点的坐标
    var touchPoint = jsEvent.touches[0] || jsEvent.changedTouches[0];
    x = touchPoint.pageX;
    y = touchPoint.pageY;
  } else {
    // 鼠标事件：直接用pageX/pageY
    x = jsEvent.pageX;
    y = jsEvent.pageY;
  }
  
  // 判断坐标是否在删除区域内
  return (x >= offset.left && x <= offset.right && y >= offset.top && y <= offset.bottom);
}

然后在eventDragStop里调用时，要把jsEvent传进去：

eventDragStop: function (event, jsEvent, ui, view) { 
  // 传入jsEvent参数给判断函数
  if (isElemOverDiv(jsEvent)) { 
    var con = confirm('Are you sure?'); 
    if (con == true) { 
      // 你的AJAX删除逻辑不变
      $.ajax({ 
        url: 'process.php', 
        data: 'type=remove&eventid=' + event.id, 
        type: 'POST', 
        dataType: 'json', 
        success: function (response) { 
          console.log(response); 
          if (response.status == 'success') { 
            $('#calendar').fullCalendar('removeEvents'); 
            getFreshEvents(); 
          } 
        }, 
        error: function (e) { 
          alert('Error processing your request: ' + e.responseText); 
        }
      });
    }
  }
}

3. 优化触摸体验（可选但推荐） #

添加CSS消除触摸设备的300ms点击延迟，让拖拽更流畅：

html {
  touch-action: manipulation;
}

4. 检查FullCalendar初始化配置 #

确保你的日历初始化时开启了编辑权限：

$('#calendar').fullCalendar({
  editable: true, // 必须设为true才能拖拽事件
  // 其他配置...
  eventDragStop: function(event, jsEvent, ui, view) {
    // 你的拖拽结束逻辑
  }
});

测试验证 #

做完以上修改后，在触摸设备上测试：

• 拖拽事件到删除区域，应该能正常触发确认弹窗
• 确认后AJAX请求能正常发送，事件被删除并刷新日历

内容的提问来源于stack exchange，提问作者N. Larsen