jquery - 可拖动 Jquery : how to prevent movement of the image

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

请注意，我添加了一些视觉反馈。

See it in action at jsFiddle.

请注意，用户必须释放鼠标按钮才能开始另一次拖动(应该有点直观)。