jquery - 通过外部拖放将事件添加到 Fullcalendar 时，项目无法获取 id

Question

我正在使用 FullCalendar 的外部拖放功能和他的代码。 http://arshaw.com/js/fullcalendar-1.5.2/demos/external-dragging.html

drop: function(date, allDay) { // this function is called when something is dropped

            // 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();
            }

        }

一切都很好，但我想将这个删除的事件添加到我的数据库中。所以我在这里添加了添加对话框代码。

var eventToAdd = {
                title: $.trim($(this).text()),
                //title: $(this).attr('id'),
                description: $(this).attr('original-title'),
                start: date.format("dd-MM-yyyy hh:mm:ss tt"),
                end: date.format("dd-MM-yyyy hh:mm:ss tt")

        };

        if (checkForSpecialChars(eventToAdd.title) || checkForSpecialChars(eventToAdd.description)) {
            alert("please enter characters: A to Z, a to z, 0 to 9, spaces");
        }
        else {
            //alert("sending " + eventToAdd.title);

            PageMethods.addEvent(eventToAdd, addSuccess);
        }

所以结果是，

drop: function (date, allDay) { // this function is called when something is dropped

                if($(this).attr('id')=='')
                    return;
            // 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;

            $('#calendar').fullCalendar('renderEvent', copiedEventObject, true);

            $(this).remove();


            var eventToAdd = {
                title: $.trim($(this).text()),
                //title: $(this).attr('id'),
                description: $(this).attr('original-title'),
                start: date.format("dd-MM-yyyy hh:mm:ss tt"),
                end: date.format("dd-MM-yyyy hh:mm:ss tt")

            };

            if (checkForSpecialChars(eventToAdd.title) || checkForSpecialChars(eventToAdd.description)) {
                alert("please enter characters: A to Z, a to z, 0 to 9, spaces");
            }
            else {
                //alert("sending " + eventToAdd.title);

                PageMethods.addEvent(eventToAdd, addSuccess);
            }
        }

事件已显示，事件可拖动，但未获取 Id。我认为在该行呈现的事件与发送到数据库的事件无关:

$('#calendar').fullCalendar('renderEvent', copiedEventObject, true);

Answer 1

仅供引用，您还可以在 HTML 中为可拖动 div 设置一个 id，然后执行以下操作:

copiedEventObject.id = $( this ).attr('id');

在“drop:”属性内(就在:

var copiedEventObject = $.extend({}, originalEventObject);

在“external-dragging.html”示例中。