Question

when dragging an element I am doing some calculation and when a certain critaria is matched I’d like the dragging to pause.

I don’t want trigging a mouseup event, just pause.

I have a perfect example set on this JS FIDDLE

Please see a container and a list of rectangles.
What I would like to achieve is somewhat the opposite as containment…

If I would be to set the containment to be .draggable_wrapper, than my UL list would be constrained inside…I DON’T WANT THAT

What I’d like is that when I drag the list, if the list position is more than zero (>0) TO pause dragging to the right and allow dragging only to the left (so to the negative position)…

I don’t want first LI’s left border to ever get to the right of the container left border…

and in the other side the exact same thing…. when draggin to the left… I want to stop when the 8. li’s right border crossing the container’s right border (this happens in the example where position is < than -55px;

so to make it more readable

$(....).draggable({
....
drag: function(){
var p_left = $(this).position().left;

if(left > 0) stop_dragging_right, allow only left;
if(left < -55px) sto_dragging_left, allow_only_right;

});

How can I do that? similar is done when constraining

Answer 1

You can obtain the coordinates of your wrapper element with offset() and provide your own containment box by passing an array in the containment option:

var wrapperOffset = $(".draggable_wrapper").offset();
$('.draggable_wrapper ul').draggable({
    distance: 3,
    axis: "x",
    revert: false,
    scroll: false,
    containment: [
        wrapperOffset.left - 55,
        wrapperOffset.top,
        wrapperOffset.left,
        wrapperOffset.top
    ],
    drag: function(e) {
        $('#posx').val($(this).position().left);
    }
});

You will find an updated fiddle here.