최소 또는 최대에 도달 중지 드래그 이벤트

Behseini :

이 데모를 살펴보고 제가 그만 들고 뛰기 곧 같은 수있는 방법을 알려 주시기 바랍니다 수 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>

V.에 Sambor :

당신은 당신의 수표 내부에이 라인을 추가 할 수 있습니다 :

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