jQuery FullCalendar - Delete an event via drag and drop

JavaScript
1

Hi there :). Been following sitepoint for a very long while (few years at least) and I have a problem that stackoverflow wasn’t able to help with so I decided to finally sign up.

Anyway, onto my problem.

I have the following code so far:


var isElemOverDiv = function(draggedItem, dropArea) {
   // Prep coords for our two elements
   var a = $(draggedItem).offset();
   a.right = $(draggedItem).outerWidth() + a.left;
   a.bottom = $(draggedItem).outerHeight() + a.top;

   var b = $(dropArea).offset();
   a.right = $(dropArea).outerWidth() + b.left;
   a.bottom = $(dropArea).outerHeight() + b.top;

   // Compare
   if (a.left >= b.left
       && a.top >= b.top
       && a.right <= b.right
       && a.bottom <= b.bottom) { return true; }
   return false;
}

eventDragStop: function(event, jsEvent, ui, view) {
    if (isElemOverDiv(ui, $('div.event-delete'))) {
        calendar.fullCalendar('removeEvents', event.id);
    }
}

I’m using the FullCalendar plugin if anyone is familiar with it.

Basically my goal is to be able to drag an event over the div “event-delete” and have it be deleted. What the code above is currently doing is making every event freeze in place after being dragged and does not delete it. I’m on my last legs for help and am getting desparate (this is a new system for a client) so if anyone has a solution I would appreciate it very much!

Thanks :slight_smile:

2

Try this - it shouldn’t freeze the calendar now but I still couldn’t drag the item off the calendar onto a seperate <div> that I had outside the calendar.


$(document).ready(function() {		
	$('#calendar').fullCalendar({
		eventDragStop: function(event, jsEvent, ui, view) {			
			var x = isElemOverDiv(ui, $('div.external-events'));
			alert(x);			
			
			if (x) {
				$('#calendar').fullCalendar('removeEvents', event.id);
			}			
		}		
	});
});

var isElemOverDiv = function(draggedItem, dropArea) {
	// Prep coords for our two elements
	var a = $(draggedItem).offset;	
	a.right = $(draggedItem).outerWidth + a.left;
	a.bottom = $(draggedItem).outerHeight + a.top;
	
	var b = $(dropArea).offset;
	a.right = $(dropArea).outerWidth + b.left;
	a.bottom = $(dropArea).outerHeight + b.top;

	// Compare
	if (a.left >= b.left
		&& a.top >= b.top
		&& a.right <= b.right
		&& a.bottom <= b.bottom) { return true; }
	return false;
}