Draggable Jquery：如何防止图像移动答案

【问题标题】：Draggable Jquery: how to prevent movement of the imageDraggable Jquery：如何防止图像移动
【发布时间】：2011-07-22 22:58:25
【问题描述】：

如何防止图像移动。如果图像的位置= 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
                                } 
                        }
                });

【问题讨论】：

标签： jquery draggable

【解决方案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.

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

【讨论】：

哦？为什么。这也是需要的。