jquery UI draggable: control (pause) dragging when some condition is met

draggable, jquery, jquery-ui

Solution

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.

Problem

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

Original source