完整日历正在复制拖放事件

Question

当我将事件拖到另一个时间段时，我的全日历会在视觉上复制事件。我已经将我的代码简化为 eventDrop 以隔离问题，但我无法理解这个问题。如果我将事件存储到我的本地存储，则在存储中不会获得重复项，并且在重新加载页面时副本会消失。这意味着问题只是视觉上的，并且与完整日历本身有关。但是，这显然是一个大问题，因为我不想重新加载页面：我想保留在当前视图中更改我需要的内容。

这是我的eventDrop代码：

eventDrop: function(event, delta, revertFunc, jsEvent, ui, view) {
            if (!confirm("Are you sure you want to change " + event.title + " ?")) {
                    /*If the user cancels the change, the event returns to its original position. Otherwise it saves the event.*/
                    revertFunc();       /*Revert changes using the predefined function revertFunc of fullCalendar.*/
                    $("#calendar").fullCalendar("refetchEvents");
                    /*FullCalendar Method to refetch events from all sources and rerender them on the screen.*/
                } else {
                    updateConfirm(event);       /*Use the logic to confirm the event update properties*/
                    Evento.prototype.Update(event);     /*Modify the targeted event on the localStorage using the Update method of the Evento Class*/
                    $("#calendar").fullCalendar("updateEvent", event);
                    /*FullCalendar Method to report changes to an event and render them on the calendar.*/
                    $("#calendar").fullCalendar("refetchEvents");
                    /*FullCalendar Method to refetch events from all sources and rerender them on the screen.*/
                }
            }

这是问题的 gif：https://i.imgur.com/rFPvvjE.gif

更新：在切片蟾蜍的帮助下，我将问题隔离到我的更新确认逻辑：

var updateConfirm = function(event) {
    if (confirm("New title?")) {    /*Check if the user wants to change the event title*/
        event.title = prompt("Enter the new title: ");    /*Set new title for the event*/
    } else {
        event.title = event.title;
    }
    if (confirm("New description?")) {    /*Check if the user wants to change the event description*/
        event.description = prompt("Enter the new description: ");    /*Set new description for the event*/
    } else {
        event.description = event.description;
    }
    if (confirm("Is the event important?")) {   /*Check if the user wants to change the event priority*/
        event.overlap = false;
        event.backgroundColor = "red";    /*Set new priority for the event*/
    } else {
        event.overlap = true;
        event.backgroundColor = "blue";   /*Set new priority for the event*/
    }
};

更新 2： 更新前console.log(event)确认（事件）：

Object {id: "2015-01-27T15:29:11+00:00", title: "título", start: m, end: m, allDay: false…}_allDay: false_end: m_id: "2015-01-27T15:29:11+00:00"_start: mallDay: falsebackgroundColor: "blue"className: Array[0]description: "gt4"end: mid: "2015-01-27T15:29:11+00:00"overlap: truesource: Objectstart: mstoringId: "2015-01-27T15:29:11+00:00"title: "título"__proto__: Object

更新后console.log(event)确认（事件）：

Object {id: "2015-01-27T15:29:11+00:00", title: "título", start: m, end: m, allDay: false…}_allDay: false_end: m_id: "2015-01-27T15:29:11+00:00"_start: mallDay: falsebackgroundColor: "blue"className: Array[0]description: "gt4"end: mid: "2015-01-27T15:29:11+00:00"overlap: truesource: Objectstart: mstoringId: "2015-01-27T15:29:11+00:00"title: "título"__proto__: Object

Answer 1

由于事件不是本地源的，因此不需要调用updateEvent，因为当您调用 $("#calendar").fullCalendar("refetchEvents"); 时，将从数据库中重新获取事件

我不完全确定为什么它会重复，但updateEvent修改的事件似乎在重新获取后仍然存在。您必须更改它的 ID 或将其替换为另一个事件对象，但我无法重现它。

因此，请尝试删除更新行

} else {
    updateConfirm(event); 
    Evento.prototype.Update(event);
    $("#calendar").fullCalendar("refetchEvents");
}

如果这不起作用，请尝试手动删除事件：

$("#calendar").fullCalendar( 'removeEvents', event._id ) //replace the updateEvent call with this
//or event.id if your events have an explicit id

补遗

您可能希望实际找出问题的原因，因为上述内容只是修补了它。 Evento.prototype.Update updateConfirm中的某些内容正在修改事件，以至于 FC 认为这是一个不同的事件。它是否被复制并自行替换？你在玩它的id吗？

Answer 2

做单例样式解决方案：

这对我有用，可以阻止由"新可拖动（容器）"引起的重复每次重新加载视图

$scope.Draggable = null  if ($scope.Draggable == null) {
                $scope.Draggable = new Draggable(containerEl, {
                    itemSelector: '.item',
                    eventData: function (eventEl) {
                        return {
                            title: eventEl.innerText
                        };
                    }
                });
            }