| Issue 1044: | Jquery UI Dialog(with draggable) conflicts with calendar drag and drop | |
| 1 person starred this issue and may be notified of changes. | Back to list |
I am using <a href="http://arshaw.com/fullcalendar/docs/"> full calendar </a> 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 example file that I modified to show what is happening. You need to grab jquery fullcalendar and modify the link to make this work. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <link rel='stylesheet' type='text/css' href='../fullcalendar/fullcalendar.css' /> <link rel='stylesheet' type='text/css' href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.0/themes/ui-darkness/jquery-ui.css' /> <script type='text/javascript' src='../jquery/jquery-1.5.2.min.js'></script> <script type='text/javascript' src='../fullcalendar/fullcalendar.min.js'></script> <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js'></script> <script type='text/javascript'> $(document).ready(function() { $( "#dialog" ).dialog(); /* initialize the external events -----------------------------------------------------------------*/ $('#external-events div.external-event').each(function() { // create an Event Object (http://arshaw.com/fullcalendar/docs/event_data/Event_Object/) // it doesn't need to have a start or end var eventObject = { title: $.trim($(this).text()) // use the element's text as the event title }; // store the Event Object in the DOM element so we can get to it later $(this).data('eventObject', eventObject); // make the event draggable using jQuery UI $(this).draggable({ zIndex: 999, revert: true, // will cause the event to go back to its revertDuration: 0 // original position after the drag }); }); /* initialize the calendar -----------------------------------------------------------------*/ $('#calendar').fullCalendar({ header: { left: 'prev,next today', center: 'title', right: 'month,agendaWeek,agendaDay' }, editable: true, droppable: true, // this allows things to be dropped onto the calendar !!! drop: function(date, allDay) { // this function is called when something is dropped alert('dropped'); // retrieve the dropped element's stored Event Object var originalEventObject = $(this).data('eventObject'); // we need to copy it, so that multiple events don't have a reference to the same object var copiedEventObject = $.extend({}, originalEventObject); // assign it the date that was reported copiedEventObject.start = date; copiedEventObject.allDay = allDay; // render the event on the calendar // the last `true` argument determines if the event "sticks" (http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/) $('#calendar').fullCalendar('renderEvent', copiedEventObject, true); // is the "remove after drop" checkbox checked? if ($('#drop-remove').is(':checked')) { // if so, remove the element from the "Draggable Events" list $(this).remove(); } } }); }); </script> <style type='text/css'> body { margin-top: 40px; text-align: center; font-size: 14px; font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif; } #wrap { width: 1100px; margin: 0 auto; } #external-events { float: left; width: 150px; padding: 0 10px; border: 1px solid #ccc; background: #eee; text-align: left; } #external-events h4 { font-size: 16px; margin-top: 0; padding-top: 1em; } .external-event { /* try to mimick the look of a real event */ margin: 10px 0; padding: 2px 4px; background: #3366CC; color: #fff; font-size: .85em; cursor: pointer; } #external-events p { margin: 1.5em 0; font-size: 11px; color: #666; } #external-events p input { margin: 0; vertical-align: middle; } #calendar { float: right; width: 900px; } </style> </head> <body> <div id='wrap'> <div id='external-events'> <h4>Draggable Events</h4> <div class='external-event'>My Event 1</div> <div class='external-event'>My Event 2</div> <div class='external-event'>My Event 3</div> <div class='external-event'>My Event 4</div> <div class='external-event'>My Event 5</div> <p> <input type='checkbox' id='drop-remove' /> <label for='drop-remove'>remove after drop</label> </p> </div> <div id='calendar'></div> <div id="dialog" title="Basic dialog"> <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p> </div> <div style='clear:both'></div> </div> </body> </html>
Aug 21, 2011
Project Member
#1
adamrs...@gmail.com
Status:
Done
|
|
| ► Sign in to add a comment |