SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Apr 2011
    Location
    Toronto, Canada
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    jQuery FullCalendar - Delete an event via drag and drop

    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:

    Code:
    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

  2. #2
    SitePoint Member
    Join Date
    Aug 2011
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

    Code:
    $(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;
    }


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •