Draggable Jquery: how to prevent movement of the image

How to prevent movement of the image. How to prevent the movement if the position of the image = 350. Something like containment, just the opposite. Please help.

   $('#image').draggable( 
                {  
                    drag: function(event, ui) 
                        {                      
                            if($(this).offset().left > 350) 
                                { 
                                     //there should be a code prohibiting the 开发者_运维问答
                                     //movement of the image if its position is = 350
                                } 
                        }
                });

---

Something like this should work:

var leftLimit       = 350;
var bLimitReached   = false;

$('#image').draggable ( {
    drag: function (event, ui) {
        var jThis   = $(this);

        if ( ui.offset.left > leftLimit ) {
            bLimitReached = true;
            jThis.trigger('mouseup');
            jThis.addClass ('dragLimitreached ');
        }
        else
            jThis.removeClass ('dragLimitreached ');
    },
    stop: function (event, ui) {
        var jThis   = $(event.originalEvent.target);
        if (bLimitReached) {
            jThis.offset ( {left: leftLimit} );
            bLimitReached = false;
        }
        setTimeout (function() {
            jThis.removeClass ('dragLimitreached');
        }, 2000 );
    }
} );

Note that I added a little visual feedback.

See it in action at jsFiddle.

Note that the user will have to release the mouse button to start another drag (should be somewhat intuitive).