When you use Google Calendar and want to make a new event, you can drag from the start time to the end time, and this creates 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 acplish this?

When you use Google Calendar and want to make a new event, you can drag from the start time to the end time, and this creates 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 acplish this?

• javascript
• jquery
• draggable

Share Improve this question Follow edited Jul 6, 2015 at 7:54 royhowie 11.2k1414 gold badges5353 silver badges6767 bronze badges asked May 14, 2012 at 22:11 Ram RachumRam Rachum 88.7k8686 gold badges256256 silver badges386386 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

The basic idea is to have time "slot" elements that each refer to a specific time (usually 15-minute intervals). Each slot element has an onmouseup and onmousedown handler. The mousedown handler, when triggered, stores the time referred to by that slot and updates a boolean variable that indicates whether dragging is occurring. When mouseup is triggered, the handler checks if dragging has started, and if so, decides that this is the ending slot. You now have a beginning and ending time, and you can take it from there to show some dialog that pletes the rest of the booking.

Demo: http://www.dstrout/pub/appointment.htm
The demo also includes code to prevent text selection, since that is a "side-effect" of dragging. Check out the code to see how that works.

Here's my take on the problem. It steps by hours, but it would be easy enough to adapt to step by half-hour or fifteen-minute intervals.

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

The 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/cv9LM/

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. */
});