Question

I drag horizontally a larger-than-browser div but want it to snap to the wrapper when reaching the end left and right. I can not do it with “containment” as the dragging is not working properly when the dragged div is larger than its containment:

$( "#dragable" ).draggable({ cursor: "e-resize", axis: "x", containment: "document" });

http://jsfiddle.net/xBVYT/320/

For this reason I remove the “containment” but then the dragged div is going out of the browser window:

$( "#dragable" ).draggable({ cursor: "e-resize", axis: "x" });

http://jsfiddle.net/xBVYT/325/

Any help will be much appreciated.

Answer 1

By controlling the drag event, you can prevent the draggable from moving out of the margins:
See my jsfiddle
Here are the options with the drag event function:

$( "#dragable" ).draggable({
    cursor: "e-resize"
    , axis: "x" 
    , drag: function(event, ui) {
        var $container = $(this).closest(".wrap");
        var container_left = $container.position().left;
        var container_right = $container.position().left + $container.width();
        var drag_left = ui.offset.left;
        var drag_right = ui.offset.left + $(this).width();
        if (drag_left > container_left) {
            return false;
        };
        if (drag_right < container_right) {
            return false;
        };
    }
});