시대의 변화에 따라 js의 중요성은 점점 더 커지고 있습니다. js는 웹 페이지(예: Ext 프레임워크)를 만들 수 있을 뿐만 아니라 일부 웹 특수 효과도 만들 수 있습니다. 이러한 특수 효과는 PC와 호환될 뿐만 아니라 호환됩니다. 결국 그들은 브라우저를 기반으로 하며 플랫폼과는 아무런 관련이 없습니다. 이제 js를 사용하여 Microsoft의 windows8 시스템 앱을 개발할 수 있습니다. 시간이 있으면 시도해 볼 수 있습니다.
이제 본론으로 들어가 드래그 가능한 Div의 js 구현에 대해 이야기해 보겠습니다. 먼저 이 기능을 구현하는 아이디어에 대해 이야기하겠습니다.
1. 마우스 div의 mousedown 이벤트를 캡처합니다.
2. 문서의 mousemove 이벤트를 캡처합니다.
3. 이벤트 취소
그럼 코드를 살펴보겠습니다:
다음과 같이 코드 코드를 복사합니다.
함수 드래그(id) {
var $ = 함수(플래그) {
return document.getElementById(flag);
}
$(id).onmousedown = 함수 (e) {
var d = 문서;
var 페이지 = {
이벤트: 함수(evt) {
var ev = evt ||
ev를 반환;
},
pageX: 함수(evt) {
var e = this.event(evt);
e.pageX || (e.clientX + document.body.scrollLeft - document.body.clientLeft)를 반환합니다.
},
pageY: 함수(evt) {
var e = this.event(evt);
return e.pageY || (e.clientY + document.body.scrollTop - document.body.clientTop);
},
layerX: 함수(evt) {
var e = this.event(evt);
e.layerX를 반환 ||
},
layerY: 함수(evt) {
var e = this.event(evt);
e.layerY ||
}
}
var x = page.layerX(e);
var y = page.layerY(e);
if (dv.setCapture) {
dv.setCapture();
}
else if (window.captureEvents) {
window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP);
}
d.onmousemove = 함수 (e) {
var tx = page.pageX(e) - x;
var ty = page.pageY(e) - y;
dv.style.left = tx + "px";
dv.style.top = ty + "px";
}
d.onmouseup = 함수 () {
if (dv.releaseCapture) {
dv.releaseCapture();
}
else if (window.releaseEvents) {
window.releaseEvents(Event.MOUSEMOVE | Event.MOUSEUP);
}
d.onmousemove = null;
d.onmouseup = null;
}
}
}
코드 분석:
1.
div 객체 가져오기
다음과 같이 코드 코드를 복사합니다.
var $ = 함수(플래그) {
return document.getElementById(flag);
}
2. 문서의 mousedown 이벤트를 캡처합니다.
여기에는 다음과 같은 코드가 있습니다.
다음과 같이 코드 코드를 복사합니다.
var 페이지 = {
이벤트: 함수(evt) {
var ev = evt ||
ev를 반환;
},
pageX: 함수(evt) {
var e = this.event(evt);
e.pageX || (e.clientX + document.body.scrollLeft - document.body.clientLeft)를 반환합니다.
},
pageY: 함수(evt) {
var e = this.event(evt);
return e.pageY || (e.clientY + document.body.scrollTop - document.body.clientTop);
},
layerX: 함수(evt) {
var e = this.event(evt);
e.layerX를 반환 ||
},
layerY: 함수(evt) {
var e = this.event(evt);
e.layerY ||
}
}
그 중 event는 마우스 이벤트를 가져오고, pageX와 pageY는 마우스의 좌표를 가져오고, layerX와 layerY는 마우스와 div 경계선 사이의 거리를 가져옵니다.
다음과 같은 코드도 있습니다.
다음과 같이 코드 코드를 복사합니다.
if (dv.setCapture) {
dv.setCapture();
}
else if (window.captureEvents) {
window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP);
}
div의 MouseMove 및 MouseUp 이벤트를 캡처하기 위한 것입니다. tx를 모르는 경우 온라인으로 확인할 수 있습니다.
3. 문서의 MouseMove 및 mouseUp 이벤트:
다음과 같이 코드 코드를 복사합니다.
d.onmousemove = 함수 (e) {
var tx = page.pageX(e) - x;
var ty = page.pageY(e) - y;
dv.style.left = tx + "px";
dv.style.top = ty + "px";
}
d.onmouseup = 함수 () {
if (dv.releaseCapture) {
dv.releaseCapture();
}
else if (window.releaseEvents) {
window.releaseEvents(Event.MOUSEMOVE | Event.MOUSEUP);
}
d.onmousemove = null;
d.onmouseup = null;
}
그 중 tx와 ty는 div 좌표를 설정하는 데 사용되는 가장 중요한 코드입니다.
어떤 사람들은 왜 -x,-y가냐고 물을 수도 있습니다.
x, y는 실제로 마우스와 div 경계선 사이의 거리를 빼지 않은 경우 가져옵니다.
마우스 화살표의 좌표는 div의 x 및 y 좌표와 동일합니다. 드래그 후 마우스 위치가 왼쪽 상단으로 이동합니다. 드래그 후 바운스되는 효과가 있습니다.
다음과 같이 코드 코드를 복사합니다.
if (dv.releaseCapture) {
dv.releaseCapture();
}
else if (window.releaseEvents) {
window.releaseEvents(Event.MOUSEMOVE | Event.MOUSEUP);
}
d.onmousemove = null;
d.onmouseup = null;
위 코드는 마우스를 놓은 후 문서의 onmousemove 및 onmouseup 이벤트를 취소하는 코드입니다.
저는 최근에 js를 배우고 있고, 앞으로도 여러분과 새로운 경험을 공유할 예정입니다. 모두와 함께 배우고 발전해 나가고 싶습니다.