How to stop this? Using Full Calendar drag and drop + jquery ui dialog(that has drag and drop)

I am using full calendar with the jquery ui dialog box.

So basically this is what happens. I have some draggable events that user can drag onto their calendar. Once on their calendar they can click on that event to load up a dialog box for editing.

This is a jquery ui dialog that is also draggable. Now what I am finding is that if I move the jquery dialog(this dialog is right above the calendar) around it will try to hook itself to the calendar. When this happens I have an ajax request that fires to save the where the draggable event landed.

Of course since this is not the kind of event I was expecting the request fails and crashes.

any ideas on how to stop this?

Here is an 开发者_JS百科example file that I modified to show what is happening.

http://jsfiddle.net/Jaybles/dmqXv/

drag and drop the dialog onto the calendar.

---

Unfortunately, John's solution does not prevent the jquery dialog from being dropped onto the calendar. A better and simpler solution is to use the FullCalendar option "dropAccept".

As demonstrated in the FullCalendar "Dropping External Elements" example, FullCalendar considers the events in the draggable event box as well as any open jquery dialog as an external event.

By making sure that only your external events in the draggable event box are tagged with a class such as ".external-event" and adding the "dropAccept" option with the ".external-event" class name to the FullCalendar initialization, the FullCalendar drop option will not fire when you drag and drop the open jquery dialog.

$('#calendar').fullCalendar({
dropAccept: '.external-event',
drop: function() {
}
});

Of course, you must make sure you don't tag the jquery dialog with the same class name.

Events already on the calendar are not affected because they are not considered external events.

---

I know this is old, but I had this question too (except mine was just removing from the screen), because I used this same code from full calendar that removes the events for you. Basically you just have to wrap your drop code in an if statement so it only executes for certain things. Yeah I know it's dead simple, but for some reason I thought that the drop function removed the this element from the screen but it doesn't the code that came with this full calendar does though and that was the gotcha to me.

drop: function(date, allDay) { // this function is called when something is dropped
    if($(this).hasClass("external-event")) {
        // add all existing drop code here
    }
}

This should stop the calendar from taking the jquery ui draggable modal, and all other draggables besides ones with class external-event.