日历拖拽用户功能：可获取userId但无法获取eventId问题

问题根源 #

你用event.target.getAttribute('id')拿不到eventId，是因为drop事件触发时，event.target指向的不一定是FullCalendar的事件容器本身——FullCalendar的事件元素内部有多层嵌套（比如标题、时间标签等子元素），拖拽释放时很可能选中这些子元素，而它们并没有绑定eventId相关属性。

两种解决办法 #

办法1：向上查找事件容器元素 #

FullCalendar渲染的事件元素都会带有fc-event类名，我们可以从触发事件的target向上遍历，找到这个根容器，再获取对应的eventId：

calendarEl.addEventListener('drop', function (event) {
    event.preventDefault();
    var userId = event.dataTransfer.getData('text/plain');
    // 找到最近的fc-event容器
    var eventElement = event.target.closest('.fc-event');
    if (eventElement) {
        // 根据你的渲染方式选择：如果事件元素用data-event-id存ID
        var eventId = eventElement.dataset.eventId;
        // 或者如果直接给元素设置了id属性
        // var eventId = eventElement.id;
        console.log('事件ID: ' + eventId);
    } else {
        console.log('未定位到目标事件');
    }
    console.log('用户ID: ' + userId);
});

办法2：用FullCalendar自带的drop回调（更靠谱） #

FullCalendar本身提供了专门的drop事件回调，能直接拿到事件对象，不用自己监听原生drop事件，准确度更高：

document.addEventListener('DOMContentLoaded', function() {
    var calendar = new FullCalendar.Calendar(calendarEl, {
        // 你的其他日历配置
        editable: true,
        drop: function(info) {
            // 从拖拽的用户元素里拿userId
            var userId = info.draggedEl.dataset.itemId;
            // 直接从事件对象里取eventId
            var eventId = info.event.id;
            console.log('事件ID: ' + eventId);
            console.log('用户ID: ' + userId);
        }
    });
    calendar.render();

    // 初始化可拖拽用户元素
    var draggableUsers = document.querySelectorAll('.draggable-User');
    draggableUsers.forEach(function (item) {
        item.draggable = true;
        item.addEventListener('dragstart', function (event) {
            event.dataTransfer.setData('text/plain', item.dataset.itemId);
            // 必须加这个，让FullCalendar识别这是事件拖拽操作
            event.dataTransfer.setData('application/fc-event', '');
        });
    });
});

注意：用FullCalendar自带回调时，dragstart事件里必须加上event.dataTransfer.setData('application/fc-event', '')，否则日历不会识别这次拖拽。

额外检查项 #

确保你在配置FullCalendar事件时，给每个事件都设置了id属性，比如：

events: [
    {
        id: 'event_001',
        title: '团队会议',
        start: '2024-05-21'
    }
]

FullCalendar会自动把这个id绑定到事件元素上，不管用上面哪种方法都能正确获取到。

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