Creating a drag-and-drop Google-Calendar interface

Question

When you use Google Calendar and want to create a new event, you can drag it from the beginning to the end, and this will create the event in the desired range.

I want to implement the same functionality for my site using jQuery.

Does anyone have an idea how I can do this?

Answer 1

The basic idea is to have temporary “slot” elements, each of which refers to a specific time (usually 15 minute intervals). Each slot item has an onmouseup and onmousedown handler. The mousedown handler at startup saves the time indicated by this slot and updates a boolean that indicates whether the drag is in progress. When mouseup starts, the handler checks to see if the drag has started, and if so, decides that this is the final slot. Now you have a start and end time, and you can take it from there to show some kind of dialog box that completes the rest of the reservation.

Demo: http://www.dstrout.net/pub/appointment.htm
The demo also includes code to prevent text selection, as it is a “side effect” of drag and drop. Check the code to find out how it works.

Answer 2

Here I take care of this problem. It works on the clock, but it’s easy enough to adapt to the step in half an hour or fifteen minutes.

HTML:

<div id="hours"> <div class="hour">8am</div> <div class="hour">9am</div> <div class="hour">10am</div> <div class="hour">11am</div> <div class="hour">...</div> </div> 

Javascript:

 var dragging; var yOnMousedown; $('.hour').mousedown( function(e) { e.preventDefault(); $(this).addClass( 'hour-highlighted' ); dragging = true; yOnMousedown = e.pageY; } );​​​ $(document).mouseup( function(e) { e.preventDefault(); dragging = false; } ); $(document).mousemove( function(e) { if( dragging ) { e.preventDefault(); $('.hour').each( function() { var top = $(this).offset().top; var bottom = top + $(this).height(); if( bottom > yOnMousedown && e.pageY > top ) $(this).addClass( 'hour-highlighted' ); else $(this).removeClass( 'hour-highlighted' ); } ); } } ); 

jsfiddle here: http://jsfiddle.net/cv9LM/

Answer 3

Something along the lines of mousedown, mousemove and mouseup

 var dragging = false $(someelement).mousedown(function(){ dragging = true; }); $(body).mousemove(function(){ // In here you want to do all of the dragging functionality. Try using body, // window, document etc to see what works the best. }); $(body).mouseup(function(){ dragging = false; /* If you use an element here instead of body, document or window, when the user moves outside the element and lets go of the mousebutton, the dragging won't stop. */ });