드래그 앤 드롭 effect_javascript 기술을 달성하기 위한 js

먼저 객체 지향 연습의 기본 규칙과 문제를 이해해 보겠습니다.

먼저 일반 작성 방식으로 작성하고, 이후 객체지향 작성 방식으로 변경
일반적인 방법의 변형

·함수를 중첩하지 마세요
·전역변수를 가질 수 있음
·onload 함수의 비할당문을 별도의 함수로 넣어주세요

객체지향으로 변경

·전역변수는 속성이다
·함수는 메소드이다
·온로드에서 객체 생성
·이 포인터 문제 변경

먼저 드래그 효과의 레이아웃을 개선하세요.
HTML 구조:

csc 스타일:
#box{위치: 절대;너비: 200px;높이: 200px;배경: 빨간색;}

첫 번째 단계는 프로세스 중심의 드래그 앤 드롭을 검토하는 것입니다

코드 복사 코드는 다음과 같습니다.

window.onload = 함수(){
// 요소와 초기값을 가져옵니다
var oBox = document.getElementById('box'),
          disX = 0, disY = 0;
//컨테이너 마우스 누르기 이벤트
oBox.onmousedown = 함수 (e){
        var e = e || window.event;
          disX = e.clientX - this.offsetLeft;
         disY = e.clientY - this.offsetTop;
          document.onmousemove = 기능 (e){
            var e = e || window.event;
oBox.style.left = (e.clientX - disX) 'px';
oBox.style.top = (e.clientY - disY) 'px';
        };
          document.onmouseup = 함수(){
                document.onmousemove = null;
               document.onmouseup = null;
        };
         false를 반환합니다.
};
};

두 번째 단계는 프로세스 지향을 객체 지향으로 다시 작성하는 것입니다

코드 복사 코드는 다음과 같습니다.

window.onload = 함수(){
var drag = new Drag('box');
Drag.init();
};
//생성자 드래그
함수 드래그(id){
This.obj = document.getElementById(id);
This.disX = 0;
This.disY = 0;
}
Drag.prototype.init = 함수 (){
// 이 포인터
var me = this;
This.obj.onmousedown = 함수 (e){
        var e = e ||          me.mouseDown(e);
​​​​ //기본 이벤트 차단
         false를 반환합니다.
};
};
Drag.prototype.mouseDown = 함수 (e){
// 이 포인터
var me = this;
This.disX = e.clientX - this.obj.offsetLeft;
This.disY = e.clientY - this.obj.offsetTop;
Document.onmousemove = 함수 (e){
        var e = e || window.event;
         me.mouseMove(e);
}; Document.onmouseup = 함수(){
         me.mouseUp();
}
};
Drag.prototype.mouseMove = 함수 (e){
This.obj.style.left = (e.clientX - this.disX) 'px';
This.obj.style.top = (e.clientY - this.disY) 'px';
};
Drag.prototype.mouseUp = 함수 (){
Document.onmousemove = null;
Document.onmouseup = null;
};

세 번째 단계는 코드의 차이점을 확인하는 것입니다

홈 페이지는 생성자를 사용하여 객체를 생성합니다.

코드 복사 코드는 다음과 같습니다.

//생성자 드래그
함수 드래그(id){
This.obj = document.getElementById(id);
This.disX = 0;
This.disY = 0;
}

이전에 작성된 규칙을 따르고 모든 전역 변수를 속성으로 변환하세요!

그런 다음 프로토타입에 함수를 작성하세요.

코드 복사 코드는 다음과 같습니다.

Drag.prototype.init = 함수 (){
};
Drag.prototype.mouseDown = 함수 (){
};
Drag.prototype.mouseMove = 함수 (){
};
Drag.prototype.mouseUp = 함수 (){
};

먼저 init 함수를 살펴보겠습니다.

코드 복사 코드는 다음과 같습니다.

Drag.prototype.init = 함수 (){
// 이 포인터
var me = this;
This.obj.onmousedown = 함수 (e){
        var e = e ||          me.mouseDown(e);
​​​​ //기본 이벤트 차단
         false를 반환합니다.
};
};

이 포인터가 가리키는 오류가 후속 코드에서 발생하지 않도록 me 변수를 사용하여 this 포인터를 저장합니다.

그런 다음 mouseDown 기능이 나옵니다.

코드 복사 코드는 다음과 같습니다.

Drag.prototype.mouseDown = 함수 (e){
// 이 포인터
var me = this;
This.disX = e.clientX - this.obj.offsetLeft;
This.disY = e.clientY - this.obj.offsetTop;
Document.onmousemove = 함수 (e){
        var e = e || window.event;
         me.mouseMove(e);
}; Document.onmouseup = 함수(){
         me.mouseUp();
}
};

객체지향으로 다시 작성할 때는 이벤트 객체에 주의하세요. 이벤트 객체는 이벤트에서만 나타나기 때문에 이벤트 객체를 변수에 저장한 후 매개변수를 통해 전달해야 합니다!

다음의 mouseMove 함수와 mouseUp 함수에는 주의할 점은 없습니다!

주의사항

이 포인터 문제와 관련하여 객체지향에서는 이것이 특히 중요합니다!

이 확장 읽기:

http://div.io/topic/809
이벤트 객체 관련 문제는 이벤트 객체가 이벤트에만 등장하므로 작성 방법에 주의하세요!