Question

I know how to make a datepicker ui control draggable. I am just having a hard time trying to restrict how much it displaces horizontally.

It is difficult to explain in words. Here is what I am trying to achieve.

and here is the result.

Note how you are able to drag the datepicker horizontally. I don’t want:

that gap to be greater than 0. I want the same behavior for the right part of the datepicker so that the calendar is always visible. right now if you drag it towards the left it is posible to hide the calendar. If you drag it towards the right on the other hand, you cannot hidde it. If your screen is to small though you will not be able to see the last month.

What approach should I take to solve this problem?

Answer 1

Draggable raises some events (start, drag, stop) which all provide a helper object as second argument with the position and offset the dragged element:

• ui.position – current position of the helper as { top, left } object, relative to the offset element
• ui.offset – current absolute position of the helper as { top, left } object, relative to page

My solution is to animate back the edge of the container when the dragged element is dragged too far on the left when dragging is stopped:

$("#draggable2").draggable({
    axis: "x",
    ...
    stop: function(e, ui) {
        if (ui.offset.left > 0) {
            $(this).animate({
                'left': (ui.position.left - ui.offset.left) + 'px'
            }, 250);
        }
    },
    containment: $("#draggableParent")
});​

DEMO
DEMO (full screen)

I think you can easily dig a little bit around to achieve the same result from the right dragging.