javascript - 达到最小值或最大值时停止拖动事件

Question

当拖动到达.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');

当您达到最大 y 位置时，它将删除 mousemove 监听器。

$(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>