js 마우스 드래그 기능 기본 사고방식 실현

물체 드래그 를 설정 하려 면 세 개의 이 벤트 를 사용 해 야 하 며, 이 세 개의 이벤트 의 사용 순 서 를 뒤 바 꿀 수 없습니다.

onmousedown: 마우스 로 이벤트 누 르 기

onmousemove: 마우스 이동 이벤트

onmouseup: 마우스 올 리 기 이벤트

드래그 의 기본 원 리 는 마우스 의 이동 에 따라 끌 리 는 요 소 를 이동 하 는 것 이다.마우스 의 이동 은 x, y 좌표 의 변화 이다.요소 의 이동 은 style. position 의 top 과 left 의 변화 입 니 다.물론 마 우 스 를 언제든지 움 직 일 때 요소 의 이동 을 가 져 오 는 것 이 아니 라 마우스 왼쪽 단 추 를 누 른 상태 가 누 른 상태 인지, 끌 어 당 길 수 있 는 요소 에서 누 른 것 인지 판단 해 야 한다.기본 적 인 사고방식 은 다음 과 같다.
[html] view plain
copy

드래그 상태 = 0 마우스 가 원소 위 에서 눌 렀 을 때 {
    드래그 상태 = 1
    마우스 의 x 와 y 좌 표를 기록 합 니 다.
    원소 의 x 와 y 좌 표를 기록 하 다
   }
마우스 가 원소 에서 이동 할 때 {
    끌 어 당 기 는 상태 가 0 이면 아무것도 하지 않 는 다.
    끌 어 당 기 는 상태 가 1 이 라면...
    원소 y = 현재 마우스 y - 원래 마우스 y + 원소 y
    원소 x = 현재 마우스 x - 원래 마우스 x + 원소 x
    }
마 우 스 를 놓 을 때 {
    드래그 상태 = 0
}
부분 인 스 턴 스 코드:
HTML 부분
[html] view plain
copy

**********div>
CSS 부분
[html] view plain
copy

.calculator {
    position: absolute; /*절대 포 지 셔 닝 설정, 문서 흐름 에서 벗 어 나 드래그 하기 편리 함 * /
    display: block;
    width: 218px;
    height: 280px;
    cursor: move;   /*마우스 드래그 상태 * /
}
js 부분
[html] view plain
copy

window.onload = function() {
    //드래그 기능 (주로 세 가지 이 벤트 를 촉발 합 니 다: onmousedown \ onmousemove \ \ onmouseup)
    var drag = document.getElementById('drag');

    //어떤 물 체 를 클릭 할 때 drag 대상 을 사용 하면 됩 니 다. move 와 up 은 전역 영역 입 니 다. 즉, 전체 문서 가 통용 되 므 로 drag 대상 이 아 닌 document 대상 을 사용 해 야 합 니 다. (그렇지 않 으 면 drag 대상 을 사용 할 때 물 체 는 오른쪽 이나 아래로 만 이동 할 수 있 습 니 다)
    drag.onmousedown = function(e) {
        var e = e || window.event; //호환성 ie 브 라 우 저
        var diffX = e.clientX - drag.offsetLeft; //마우스 로 물 체 를 클릭 하 는 순간 물체 왼쪽 테두리 의 거리 에 비해 = 클릭 할 때의 위 치 는 브 라 우 저의 가장 왼쪽 거리 에 비해 - 물체 왼쪽 테 두 리 는 브 라 우 저의 가장 왼쪽 거리 에 비해
        var diffY = e.clientY - drag.offsetTop;

        /*낮은 버 전 ie bug: 물체 가 브 라 우 저 에서 끌 려 나 오지 만 창 외부 일 때 스크롤 바 가 나타 납 니 다.
            해결 방법 은 ie 브 라 우 저 만 의 두 가지 방법 으로 setCapture () \ releaseCapture () 를 사용 하 는 것 입 니 다. 이 두 가지 방법 은
            마 우 스 를 브 라 우 저 외부 로 미 끄 러 뜨 려 도 이 벤트 를 포착 할 수 있 습 니 다. 우리 의 bug 는 마우스 가 브 라 우 저 를 옮 길 때 입 니 다.
            제한 초과 기능 은 효력 을 상실 합 니 다. 이 방법 으로 이 문 제 를 해결 할 수 있 습 니 다. 주: 이 두 가지 방법 은 onmousedown 과 onmouseup 에 사 용 됩 니 다 * /
            if(typeof drag.setCapture!='undefined'){
                drag.setCapture();
            }

        document.onmousemove = function(e) {
            var e = e || window.event; //호환성 ie 브 라 우 저
            var left=e.clientX-diffX;
            var top=e.clientY-diffY;

            //드래그 물 체 를 제어 하 는 범 위 는 브 라 우 저 창 에 만 있 을 수 있 으 며 스크롤 바 가 나타 나 지 않 습 니 다.
            if(left<0){
                left=0;
            }else if(left >window.innerWidth-drag.offsetWidth){
                left = window.innerWidth-drag.offsetWidth;
            }
            if(top<0){
                top=0;
            }else if(top >window.innerHeight-drag.offsetHeight){
                top = window.innerHeight-drag.offsetHeight;
            }

            //이동 시 물체 의 거 리 를 다시 얻어 끌 때 흔 들 리 는 현상 을 해결 하 다.
            drag.style.left = left+ 'px';
            drag.style.top = top + 'px';
        };
        document.onmouseup = function(e) { //마우스 가 튕 길 때 이동 하지 않 습 니 다.
            this.onmousemove = null;
            this.onmouseup = null; //마우스 가 튕 겨 나 오 면 순환 하 는 것 을 예방 합 니 다.

            //낮은 버 전 i 복구 bug
            if(typeof drag.releaseCapture!='undefined'){
                drag.releaseCapture();
            }
        };
    };
};
원본 코드:

/span>html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>title>
    <style>
        .calculator {
            position: absolute; /*      ，     ，    */
            display: block;
            width: 218px;
            height: 280px;
            cursor: move;   /*      */
        }
    style>
head>
<body>
<div class="calculator" id="drag">**********div>
body>
html>

        <script>
            window.onload = function() {
                //    (         ：onmousedown\onmousemove\onmouseup)
                var drag = document.getElementById('drag');

                //      ， drag    ，move up     ，         ，    document     drag  (  ，  drag               )
                drag.onmousedown = function(e) {
                    var e = e || window.event; //  ie   
                    var diffX = e.clientX - drag.offsetLeft; //                     =                  -                 
                    var diffY = e.clientY - drag.offsetTop;

                    /*   ie bug:               ，       ，
                            ie      2   setCapture()\releaseCapture(),     ，
                                          ，    bug             ，
                                。     ，        。 ：       onmousedown onmouseup */
                    if(typeof drag.setCapture!='undefined'){
                        drag.setCapture();
                    }
                    document.onmousemove = function(e) {
                        var e = e || window.event; //  ie   
                        var left=e.clientX-diffX;
                        var top=e.clientY-diffY;

                        //                  ，        
                        if(left<0){
                            //left=0;
                        }else if(left >window.innerWidth-drag.offsetWidth){
                            left = window.innerWidth-drag.offsetWidth;
                            //left = window.innerWidth;
                        }
                        if(top<0){
                            //top=0;
                        }else if(top >window.innerHeight-drag.offsetHeight){
                            top = window.innerHeight-drag.offsetHeight;
                            //top = window.innerHeight;
                        }

                        //            ，            
                        drag.style.left = left+ 'px';
                        drag.style.top = top + 'px';
                    };
                    document.onmouseup = function(e) { //             
                        this.onmousemove = null;
                        this.onmouseup = null; //            （               ）

                        //     ie bug
                        if(typeof drag.releaseCapture!='undefined'){
                            drag.releaseCapture();
                        }
                    };
                };
            };
        script>

js 마우스 드래그 기능 기본 사고방식 실현

좋은 웹페이지 즐겨찾기