Draggable Jquery: как предотвратить движение изображения

Question

Как предотвратить движение изображения.Как предотвратить движение, если положение изображения = 350. Что-то вроде сдерживания, как раз наоборот.Пожалуйста, помогите.

   $('#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
                                } 
                        }
                });

Answer 1

Как-то так должно работать:

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 );
    }
} );

Обратите внимание, что я добавил небольшую визуальную обратную связь.

Смотрите это в действии на jsFiddle.

Обратите внимание, что пользователю придется отпустить кнопку мыши, чтобы начать еще одно перетаскивание (должно быть несколько интуитивно понятно).