fullcalendar eventDragStop triggered after event returns to original position - fullcalendar

Question

I would like to delete events on a fullcalendar jquery plugin by dragging them to a trash can image and dropping them in. There are several posts that discuss this action but I can't seem to get mine to work.
The trash can image is defined in the cshtml below:
<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>
I can drag the event to the trash can but it reverts back to its original position then the eventDragStop event is triggered. Since it is not over the trash can, the rest of the code is not run. This is my fullcalendar code:
$('#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
How do I get the event from NOT returning to its original position when it is over the trash can?

Answer 1

i had same problem here. And i found a paleative solution.
I hope that it works for you too.
Open fullcalendar.js and edit:
dragRevertDuration: 500
to
dragRevertDuration: 0