FullCalendar拖拽事件时如何隐藏popover，结束拖拽后恢复显示？

嘿，这个需求我之前做FullCalendar的时候刚好碰到过，其实利用FullCalendar自带的拖拽/调整事件就能轻松搞定！给你一步步拆解解决方案：

1. 先给日程元素加个唯一标识（可选但更精准） #

在你现有的eventRender回调里，给生成的日程元素加上对应事件的ID标记，这样后面能精准定位到当前操作的元素，避免误操作其他popover：

eventRender: function(event, elemento, resource, view) { 
    var start = $.fullCalendar.formatDate(event.start, "DD-MM-Y HH:mm"); 
    var end = $.fullCalendar.formatDate(event.end, "DD-MM-Y HH:mm"); 
    // 给元素绑定事件ID，方便后续定位
    elemento.attr('data-event-id', event._id);
    elemento.popover({ 
        title: start + ' — ' + end, 
        content: event.title, 
        trigger: 'hover', 
        placement: 'top', 
        container: 'body' 
    }); 
}

2. 拖拽/调整开始时隐藏popover #

当用户开始拖拽或者调整日程大小时，我们直接隐藏所有已打开的popover（或者精准定位当前元素的），避免popover跟着乱跑影响体验：

// 拖拽开始触发
eventDragStart: function(event, jsEvent, ui, view) {
    // 隐藏所有已激活的popover
    $('[data-toggle="popover"]').popover('hide');
    // 要是想精准只关当前操作的，就用下面这句：
    // $('[data-event-id="' + event._id + '"]').popover('hide');
},
// 调整大小开始触发
eventResizeStart: function(event, jsEvent, ui, view) {
    $('[data-toggle="popover"]').popover('hide');
}

3. 停止操作后重新唤起popover #

当拖拽或调整结束时，我们给当前的日程元素触发mouseenter事件（因为你的popover是hover触发的，hover本质就是mouseenter和mouseleave的组合），这样就能自动重新显示popover了：

// 拖拽结束后显示
eventDragStop: function(event, jsEvent, ui, view) {
    var $targetEvent = $('[data-event-id="' + event._id + '"]');
    // 触发mouseenter唤起popover
    $targetEvent.trigger('mouseenter');
},
// 调整大小结束后显示
eventResizeStop: function(event, jsEvent, ui, view) {
    var $targetEvent = $('[data-event-id="' + event._id + '"]');
    $targetEvent.trigger('mouseenter');
}

小提示 #

如果你的FullCalendar是v4及以上版本，注意事件名称和参数会有变化哦，比如eventRender改成了eventDidMount，事件对象的属性也会不同，需要稍微调整适配。另外要是碰到popover位置偏移的情况，可以在触发mouseenter前先更新下popover的位置：$targetEvent.popover('update').trigger('mouseenter');

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