Событие Stop Drag при достижении минимума или максимума

Question

Можете ли вы взглянуть на эту демонстрацию и сообщить мне, как я могу остановить перетаскивание, как только drag достигнет верха и низа .parent

Как вы можете видеть .button останавливается, как только он достигает внутреннего верха и низа .parent, но событие все еще продолжается! , чтобы проверить это, попробуйте перетащить .button в нижнюю часть и не останавливайте перетаскивание при достижении конца, поскольку вы можете видеть, что new_top все еще обновляется!

$(function() {
    $('.button').mousedown(function(e) {
        if(e.which===1) {
            var button = $(this);
            var parent_height = button.parent().innerHeight();
            var top = parseInt(button.css('top')); //current top position
            var original_ypos = button.css('top','').position().top; //original ypos (without top)
            button.css({top:top+'px'}); //restore top pos
            var drag_min_ypos = 0-original_ypos;
            var drag_max_ypos = parent_height-original_ypos-button.outerHeight();
            var drag_start_ypos = e.clientY;
            $('#log1').text('mousedown top: '+top+', original_ypos: '+original_ypos);
            $(window).on('mousemove',function(e) {
                button.addClass('drag');
                var new_top = top+(e.clientY-drag_start_ypos);
                button.css({top:new_top+'px'});
                if(new_top<drag_min_ypos) { button.css({top:drag_min_ypos+'px'}); }
                if(new_top>drag_max_ypos) { button.css({top:drag_max_ypos+'px'}); }
                $('#log2').text('mousemove min: '+drag_min_ypos+', max: '+drag_max_ypos+', new_top: '+new_top);

            });
            $(window).on('mouseup',function(e) {
                 if(e.which===1) {
                    $('.button').removeClass('drag');
                    $(window).off('mouseup mousemove');
                    $('#log1').text('mouseup');
                    $('#log2').text('');
                 }
            });
        }
    });
});

.parent {
    position: relative;
    display: block;
    padding: 0px;
    margin: 20px;
    width:45px;
    height: 200px;
    border: 1px solid black;
}
.button {
    position: absolute;
    top: 0;
    display: table;
    margin-bottom: 2px;
    height: 25px;
    clear: both;
}
.button.drag { z-index: 99; color: red; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="parent" class="parent">
    <button id="button1" class="button">Drag</button>

</div>
<div id="log1"></div>
<div id="log2"></div>

Answer 1

Вы можете добавить эту строку в свой чек:

$(this).off('mousemove');

, который удаляет слушателя mousemove при достижении максимальной позиции y.

$(function() {
    $('.button').mousedown(function(e) {
        if(e.which===1) {
            var button = $(this);
            var parent_height = button.parent().innerHeight();
            var top = parseInt(button.css('top')); //current top position
            var original_ypos = button.css('top','').position().top; //original ypos (without top)
            button.css({top:top+'px'}); //restore top pos
            var drag_min_ypos = 0-original_ypos;
            var drag_max_ypos = parent_height-original_ypos-button.outerHeight();
            var drag_start_ypos = e.clientY;
            $('#log1').text('mousedown top: '+top+', original_ypos: '+original_ypos);
            $(window).on('mousemove',function(e) {
                button.addClass('drag');
                var new_top = top+(e.clientY-drag_start_ypos);
                button.css({top:new_top+'px'});
                
                if(new_top < drag_min_ypos) {  
                  button.css({top:drag_min_ypos+'px'}); 
                }
                
                if (new_top > drag_max_ypos) {
                  button.css({top:drag_max_ypos+'px'}); 
                  $(this).off('mousemove');   /// <<< ------ HERE
                }
                $('#log2').text('mousemove min: '+drag_min_ypos+', max: '+drag_max_ypos+', new_top: '+new_top);

             
            });
            $(window).on('mouseup',function(e) {
                 if(e.which===1) {
                    $('.button').removeClass('drag');
                    $(window).off('mouseup mousemove');
                    $('#log1').text('mouseup');
                    $('#log2').text('');
                 }
            });
        }
    });
});

.parent {
    position: relative;
    display: block;
    padding: 0px;
    margin: 20px;
    width:45px;
    height: 200px;
    border: 1px solid black;
}
.button {
    position: absolute;
    top: 0;
    display: table;
    margin-bottom: 2px;
    height: 25px;
    clear: both;
}
.button.drag { z-index: 99; color: red; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="parent" class="parent">
    <button id="button1" class="button">Drag</button>

</div>
<div id="log1"></div>
<div id="log2"></div>