【问题标题】: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.

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

    【讨论】:

    • 哦?为什么。这也是需要的。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-11-13
    • 2012-08-21
    • 1970-01-01
    • 2021-03-07
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多