Drop在fullCalendar中不起作用

Question

我可以拖动活动，但我不能放弃它。我的意思是只要我拿着它就可以拖动它。但是当我释放事件时，它立即返回到拖动前的位置。 因此事件eventDrop从未被调用过。

我将所有属性设置为正确的值。多次检查过它们。像resize这样的所有其他功能都可以正常工作。

calendar = $('#calendar').fullCalendar({
    monthNames: ['Январь', 'Ферваль', 'Март', 'Апрель', 'Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь'],
    monthNamesShort: ['январь', 'февраль', 'март', 'апрель', 'май', 'июнь', 'июль', 'август', 'сентябрь', 'октябрь', 'ноябрь', 'декабрь'],
    dayNames: ['Воскресенье', 'Понедельник', 'Вторник', 'Среда', 'Четверг', 'Пятница', 'Суббота'], 
    dayNamesShort: ['ВС', 'ПН', 'ВТ', 'СР', 'ЧТ', 'ВТ', 'СБ'],
    buttonText: {
        prev:     ' ◄ ',
        next:     ' ► ',
        prevYear: ' << ',
        nextYear: ' >> ',
        today:    'сегодня',
        month:    'месяц',
        week:     'неделя',
        day:      'день'
    },
    titleFormat: {
        month: 'MMMM yyyy',
        week: "d[ yyyy]{ '—'[ MMM] d, MMMM, yyyy}",
        day: 'd, MMMM, yyyy, dddd'
    },
    columnFormat: {
        month: 'dddd',
        week: 'ddd, d.M',
        day: 'dddd d.M'
    },
    timeFormat: {
        agenda: 'H:mm{ - H:mm}',
        '': 'H(:mm)'
    },
    weekMode: 'liquid',
    header: {
        left:   'title',
        center: '',
        right:  'agendaDay,agendaWeek,month today prev,next'
    },
    defaultView: 'agendaWeek',
    allDaySlot: false,
    axisFormat: 'H:mm',
    defaultEventMinutes: 60,
    slotMinutes: 30,
    minTime: 8,
    maxTime: 20,
    firstDay: 1,
    editable: true,
    selectable: true,
    selectHelper: true,
    disableDragging: false,
    disableResizing: false,
    select: function (start, end, allDay) {
            ...
        },
    eventClick: function (calEvent, jsEvent, view) {
            ...
        },
    eventResize: function(event, dayDelta, minuteDelta, revertFunc) {
        ...
    },
    eventDrop: function(event, dayDelta, minuteDelta, allDay, revertFunc) {
        ...
    }
}); 

Answer 1

您使用正确的drop方法吗？

eventDrop适用于将日历中已存在的事件移至另一个日期的情况。为此，您的代码工作正常。

drop用于获取jQuery-UI可拖动对象并将其放在日历上。您没有处理此问题的代码。您需要将droppable选项设置为true并连接到drop方法。

试试这个，我的更改接近底部

calendar = $('#calendar').fullCalendar({
        monthNames: ['Январь', 'Ферваль', 'Март', 'Апрель', 'Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь'],
        monthNamesShort: ['январь', 'февраль', 'март', 'апрель', 'май', 'июнь', 'июль', 'август', 'сентябрь', 'октябрь', 'ноябрь', 'декабрь'],
        dayNames: ['Воскресенье', 'Понедельник', 'Вторник', 'Среда', 'Четверг', 'Пятница', 'Суббота'], 
        dayNamesShort: ['ВС', 'ПН', 'ВТ', 'СР', 'ЧТ', 'ВТ', 'СБ'],
        buttonText: {
            prev:     ' ◄ ',
            next:     ' ► ',
            prevYear: ' << ',
            nextYear: ' >> ',
            today:    'сегодня',
            month:    'месяц',
            week:     'неделя',
            day:      'день'
        },
        titleFormat: {
            month: 'MMMM yyyy',
            week: "d[ yyyy]{ '—'[ MMM] d, MMMM, yyyy}",
            day: 'd, MMMM, yyyy, dddd'
        },
        columnFormat: {
            month: 'dddd',
            week: 'ddd, d.M',
            day: 'dddd d.M'
        },
        timeFormat: {
            agenda: 'H:mm{ - H:mm}',
            '': 'H(:mm)'
        },
        weekMode: 'liquid',
        header: {
            left:   'title',
            center: '',
            right:  'agendaDay,agendaWeek,month today prev,next'
        },
        defaultView: 'agendaWeek',
        allDaySlot: false,
        axisFormat: 'H:mm',
        defaultEventMinutes: 60,
        slotMinutes: 30,
        minTime: 8,
        maxTime: 20,
        firstDay: 1,
        editable: true,
        selectable: true,
        selectHelper: true,
        disableDragging: false,
        disableResizing: false,
        select: function (start, end, allDay) {

            },
        eventClick: function (calEvent, jsEvent, view) {

            },
        eventResize: function(event, dayDelta, minuteDelta, revertFunc) {

        },
        eventDrop: function(event, dayDelta, minuteDelta, allDay, revertFunc) {
           alert('Moving an event'); 
        },

        droppable: true,
        drop: function(date, allDay) {
           alert('Dropping an external event');

           // The rest of this method is taken from external-dragging.html from the demo files

           // retrieve the dropped element's stored Event Object  
             var originalEventObject = $(this).data('eventObject');

           // we need to copy it, so that multiple events don't have a reference to the same object 
             var copiedEventObject = $.extend({}, originalEventObject);

           // assign it the date that was reported
             copiedEventObject.start = date;
           copiedEventObject.allDay = allDay;

             // render the event on the calendar
             // the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/)
             $('#calendar').fullCalendar('renderEvent', copiedEventObject, true);

             // is the "remove after drop" checkbox checked?
             if ($('#drop-remove').is(':checked')) {
             // if so, remove the element from the "Draggable Events" list
               $(this).remove();
           }
        }
    });