Hacer una interfaz de arrastrar similar a Google-Calendar

Cuando usa Google Calendar y desea crear un nuevo evento, puede arrastrar desde la hora de inicio hasta la hora de finalización, y esto crea el evento en el range deseado.

Deseo implementar la misma funcionalidad para mi sitio usando jQuery.

¿Alguien tiene una idea de cómo puedo lograr esto?

La idea básica es tener elementos de "intervalo" de time que cada uno se refiera a un time específico (por lo general, intervalos de 15 minutos). Cada elemento de ranura tiene un controller onmouseup y onmousedown. El controller de mousedown, cuando se desencadena, almacena el time al que hace reference ese intervalo y actualiza una variable booleana que indica si se está produciendo un arrastre. Cuando se activa el mouseup, el controller comtesting si el arrastre se ha iniciado, y si es así, decide que esta es la ranura final. Ahora tiene una hora de inicio y finalización, y puede tomarla desde allí para mostrar un cuadro de dialog que completa el rest de la reserva.

Demostración: http://www.dstrout.net/pub/appointment.htm
La demostración también incluye código para evitar la selección de text, ya que es un "efecto secundario" de arrastre. Mira el código para ver cómo funciona.

Aquí está mi opinión sobre el problema. Pasa por horas, pero sería bastante fácil adaptarse a intervalos de media hora o de quince minutos.

El 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> 

El 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 aquí: http://jsfiddle.net/cv9LM/

Algo parecido a mousedown, mousemove y 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. */ });