事件返回原始位置后触发的fullcalendar eventDragStop

Question

我想删除一个完整日历 jquery 插件上的事件，方法是将它们拖到垃圾箱图像并将它们放入。有几篇文章讨论了这个动作，但我似乎无法让我的工作。 垃圾桶图片定义在下面的cshtml中：

<div class="well well-sm" id="deleteEventsDiv" style="text-align:center">
    <label id="delete_events_lbl" style="display:block; text-align:center; font-size:medium; font-weight:bold">Delete Events</label>

    <img src="~/Images/cal-trash.png">
    <div class="note">
        <strong>Note:</strong> Drag and drop events here to delete them
    </div>
</div>

我可以将事件拖到垃圾桶，但它会恢复到原来的位置，然后触发eventDragStop 事件。由于它没有越过垃圾桶，因此其余代码不会运行。这是我的完整日历代码：

$('#edit_calendar').fullCalendar({
header:
{
    left: 'prev,next today',
    center: 'title',
    right: 'month,agendaWeek,agendaDay'
},
titleFormat: { month: 'MMMM' },
defaultView: 'month',
selectable: true,
selectHelper: true,
droppable: true,
drop: function (date, jsEvent, ui, resourceId) {      
    var memberName = $(this).data('event').title;
    var memberID = $(this).attr('id').toString();
    //Create Event - add to array
    var newEvent = new Object();
    newEvent = {
        title: memberName,
        id: memberID,
        start: date.format(),
        end: date.format(),
        objectID: 0
    };  
    eventsAdded.push(newEvent);
},
editable: true,
//The following constraints prevents the user from adding/updating/deleting events that are before the current date
//The end date is required.  So, you can't add events over a year away from the current date
eventConstraint: {
    start: moment().startOf('day'),
    end: moment(moment().startOf('day'), 'MM-DD-YYY').add('days', 365)
},
selectConstraint: {
    start: moment().startOf('day'),
    end: moment(moment().startOf('day'), 'MM-DD-YYY').add('days', 365)
},
resizable: true,
dragRevertDuration: 0,
eventDragStop: function (event, jsEvent, ui, view) {
    alert('event drag stopped...should be over trash can.');
    // This condition makes it easier to test if the event is over the trash can using Jquery
    if ($('div#deleteEventsDiv').is(':hover')) {
        // Confirmation popup
        $.SmartMessageBox({
            title: "Delete Event?",
            content: 'Are you sure you want to remove this event from the calender?',
            buttons: '[No][Yes]'
        }, function (ButtonPressed) {
            if (ButtonPressed === "Yes") {

                // You can change the URL and other details to your liking.
                // On success a small box notification will fire
                $.ajax({
                    url: '/events/' + event.id,
                    type: 'DELETE',
                    success: function (request) {
                        $.smallBox({
                            title: "Deleting Event",
                            content: "Event Deleted",
                            color: "#659265",
                            iconSmall: "fa fa-check fa-2x fadeInRight animated",
                            timeout: 4000
                        });
                        $('#edit_calendar').fullCalendar('removeEvents', event.id);
                    }
                });
            }
        });
    }
}
}); //end calendar initialization

当事件在垃圾桶上方时，如何使事件不返回其原始位置？

Answer 1

我在这里遇到了同样的问题。而且我找到了一个暂时的解决方案。

我希望它也对你有用。

打开 fullcalendar.js 并编辑：

dragRevertDuration: 500

到

dragRevertDuration: 0