js 마우스 로 드래그 탭 누 르 기

마우스 이벤트 가 많 습 니 다. 여기 서 사용 해 야 할 것 은 mousedown 이벤트 입 니 다.
mousedown 이벤트 정의 와 용법: 마우스 포인터 가 요소 위로 이동 하고 마우스 버튼 을 누 르 면 mousedown 이벤트 가 발생 합 니 다.click 이벤트 와 달리 mousedown 이 벤트 는 버튼 만 누 르 고 풀 지 않 아 도 발생 합 니 다.mousedown () 방법 은 mousedown 사건 을 촉발 하거나 mousedown 사건 이 발생 했 을 때 실행 하 는 함 수 를 규정 합 니 다.

$(function () {
                var _move = false;//    
                var _x, _y;//             
                $(".rightNav").click(function () {
                })
                    .mousedown(function (e) {
                    _move = true;
                    _x = e.pageX - parseInt($(".rightNav").css("left"));
                    _y = e.pageY - parseInt($(".rightNav").css("top"));
                });
                $(document).mousemove(function (e) {
                    if (_move) {
                        var x = e.pageX - _x;//                     
                        var y = e.pageY - _y;
                    }
                    $(".rightNav").css({ top: y, left: x });//     
                })
                    .mouseup(function () {
                    _move = false;
                })
            })

위의 드래그 코드 는 페이지 에서 마음대로 이동 할 수도 있 고 범 위 를 줄 수도 있 습 니 다.
우선 두 변 수 를 설명 합 니 다x、_y. 마우스 의 left 와 top 을 가 져 옵 니 다. mousedown 사건 을 촉발 할 때 마우스 의 left 와 top 이 지정 한 범위 내 에 있 는 지 여 부 를 판단 하고 초과 하면x，_y 할당, 이동 탭 을 수정 하 는 left 와 top 에x，_y。

$(function () {
            var _move = false;//    
            var _x, _y;//             
            $(".rightNav").click(function () {
            })
                .mousedown(function (e) {
                _move = true;
                _x = e.pageX - parseInt($(".rightNav").css("left"));
                _y = e.pageY - parseInt($(".rightNav").css("top"));
            });
            $(document).mousemove(function (e) {
                if (_move) {
                    var x = e.pageX - _x;//                     
                    var y = e.pageY - _y;
                    if (y < 75) {
                        y = 75;
                    } else {
                        if (y > 700) {
                            y = 700;
                        }
                    }
                    if (x < 75) {
                        x = 75;
                    } else {
                        if (x > 1400) {
                            x = 1400;
                        }
                    }
                }
                $(".rightNav").css({ top: y, left: x });//     
            })
                .mouseup(function () {
                _move = false;
            })
        })

마우스 프레임 의 주파수 가 너무 빠 르 기 때문에 라벨 의 스타일 은 너무 복잡 하 게 설정 하여 프레임 의 속도 에 영향 을 주지 않 는 것 이 좋 습 니 다.