JS 드래그 코드_javascript 기술을 작성해 보겠습니다.

1. 드래그할 이벤트에는 onmousedown, onmousemove, onmouseup의 세 가지 이벤트가 있습니다
2. onmousemove 이벤트에서는 드래그된 요소의 위치 변경이 실제로 직설적으로 말하면 요소가 필요한 거리만큼 처리됩니다. move는 마우스의 두 움직임 사이의 거리입니다.
3. 또한 setCapture 및 releaseCapture도 포함됩니다. 목적은 이동된 요소에 항상 포커스가 있는지 확인하는 것입니다.
이것은 대략적인 이전 이해입니다. JS 드래그 기술---setCapture 구현에 대해 나중에 작업 요구 사항이 개선됨에 따라 모든 작업은 크로스 브라우저에서 수행되어야 합니다. 그래서 일부 오픈소스 코드를 참고하여 다시 구상하고 구현했습니다.
이제 일반적인 아이디어를 다음 단계로 분석할 수 있는데, 하나씩 보여드리겠습니다.
1. 우리는 끌기 위해 움직이는 걸까요? 물론 Google Maps처럼 그 목적은 현재 공간 좌표를 계산하여 각 이동 후 지리 정보를 로드하는 것입니다. 그래서 저는 여기에 몇 가지 일반적인 이벤트를 디자인했습니다. 다음은 이벤트 목록입니다.
onDragStart: 요소를 드래그할 때 이 이벤트를 등록하면 트리거 시 이동된 요소의 좌표인 x와 y라는 두 개의 매개변수를 받게 됩니다
. onDrag: 요소 드래그 프로세스 중에 이 이벤트를 등록하면 트리거될 때 두 개의 매개변수 nx 및 ny를 받게 됩니다. 드래그 프로세스 중 좌표의 오프셋
onDragEnd: 요소가 끝날 때 이를 등록하면 이벤트가 트리거되면 두 개의 매개변수를 받게 됩니다. 매개변수 x와 y는 각각 이동된 요소의 현재 좌표입니다.
2. onmousedown 이벤트는 누구에게 바인딩되어야 합니까? 나중에 나는 그것이 매우 유연하지 않다는 것을 발견했습니다. 이제는 관련되지 않은 요소가 있으면 요소를 동시에 드래그할 수 있도록 설계되었습니다.
3. 이동 과정에서 요소에 항상 포커스가 있는지 확인하는 방법은 무엇입니까? 크로스 브라우저이기 때문에 더 이상 setCapture와 같은 메소드를 사용하지 않습니다. 또 다른 생각은 요소 이동 프로세스 중에 포커스가 없는 이유는 onmousemove 이벤트를 드래그된 요소에 등록한다는 것입니다. 이것은 필요하지 않으므로 요소가 onmousedown 이벤트를 트리거할 때 onmousemove 및 onmouseup 이벤트를 문서에 직접 등록하여 마우스가 움직이는 곳마다 포커스가 있게 합니다.
말은 이쯤하고, 코드 구조를 직접 살펴보겠습니다!

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

Drag = {
obj: null ,
init: 함수(옵션) {
options.handler.onmousedown = this.start;
options.handler.root = options.root || var root = 옵션. handler.root ;
root.onDragStart = options.dragStart || new Function();
root.onDrag = options.onDrag || new Function()
root.onDragEnd || new Function( );
},
start: function (e) {//이것은 현재 핸들러입니다.
var obj = Drag.obj = this
obj.style.cursor = ' move';
e || Drag.fixEvent(window.event);
ey = e.pageY;
obj.lastMouseY = ey;
var x = obj.root.offsetLeft;
var y = obj.root..offsetTop;
obj.root.style.left = x "px"; obj.root .style.top = y "px";
document.onmouseup = Drag.end;
document.onmousemove = Drag.drag;
obj.root.onDragStart(x, y); 🎜>} ,
드래그: 함수 (e) {
e = e || Drag.fixEvent(window.event)
ex = e.pageX
ey = e.pageY; 🎜>var root = Drag.obj.root;
var x = root.style.left ?parseInt(root.style.left) :
var y = root.style.top ? style.top ) : 0;
var nx = ex - Drag.obj.lastMouseX x;
var ny = ey - Drag.obj.lastMouseY y
root.style.left; ;
root.style.top = ny "px";
Drag.obj.root.onDrag(nx, ny)
Drag.obj.lastMouseX =
Drag.obj.lastMouseY = ey;
},
end: 함수(e) {
var x = Drag.obj.root.style.left ?parseInt(Drag.obj.root.style.left) : 0; 🎜>var y = Drag.obj.root.style.top ?parseInt(Drag.obj.root.style.top) : 0
Drag.obj.root.onDragEnd(x, y)
document .onmousemove = null;
document.onmouseup = null;
Drag.obj = null
},
fixEvent: 함수(e) {
e.pageX = e.clientX 문서. documentElement.scrollLeft ;
e.pageY = e.clientY document.documentElement.scrollTop;
return e;
위 init는 주로 onDragStart, onDrag, onDragEnd의 세 가지 이벤트를 기록하는 등 일부 초기화 작업을 처리합니다. 핸들러는 드래그 이벤트를 처리하는 요소이고 루트는 드래그된 요소입니다.
핸들러를 클릭하면 Drag.start 메소드가 트리거됩니다. Drag.start는 주로 문서에 대한 onmouseup 및 onmousemove 이벤트를 등록하고 onDragStart 이벤트를 트리거합니다.
Drag.drag 메소드의 주요 기능은 이동된 요소의 위치를 ​​업데이트하고 전체 페이지를 기준으로 마우스 위치를 기록하는 것입니다.
Drag.end 방법은 훨씬 더 간단합니다. 마무리 작업만 하면 됩니다.

마지막으로 여러분이 사용할 수 있는 코드를 첨부하겠습니다. 모두 즐거운 학습이 되셨으면 좋겠습니다!

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

Drag.init({
handler : document.getElementById("handler"),
root:document.getElementById("root")
})

="핸들러">