JS drag 드래그 코드 를 같이 쓰 겠 습 니 다.

1.세 가지 이 벤트 를 끌 어 다 놓 기 위해 onmousedown,onmousemove,onmouseup 2,onmousemove 이벤트 에서 끌 려 다 니 는 요소 의 위치 변 화 를 처리 합 니 다.사실은 요소 가 이동 할 거 리 는 마우스 두 번 이동 하 는 거리 입 니 다.3.그 중에서 setCapture,releaseCapture 도 포함 되 는데 이 사 된 요소 가 항상 초점 을 맞 추기 위해 서 입 니 다.예전 에는 대체적으로 예전 의 인식 이 었 고 JS 드래그 기술---setCapture 에 대하 여 이라는 실현 을 참조 할 수 있 었 다.그 후에 업무 요구 가 높 아 지면 서 하 는 일 은 모두 브 라 우 저 를 뛰 어 넘 어야 하기 때문에 오픈 소스 코드 를 다시 구상 하고 참고 하여 실현 했다.현재 대체적인 사 고 는 다음 과 같은 몇 단계 로 분석 할 수 있 습 니 다.제 가 일일이 보 여 드 리 겠 습 니 다.1.우 리 는 이 사 를 끌 기 위해 이 사 를 합 니까?물론 구 글 지도 와 같이 옮 길 때마다 현재 공간 좌 표를 계산 하여 지리 정 보 를 불 러 오 는 것 이 목적 은 아 닙 니 다.그래서 제 가 여기 서 흔히 볼 수 있 는 사건 을 몇 개 설 계 했 습 니 다.다음은 이벤트 목록 onDragstart:요소 가 지연 되 었 을 때 이 이 벤트 를 등록 하면 트리거 할 때 두 개의 인자 x 를 받 습 니 다.y 는 옮 겨 진 요소 가 지연 되 었 을 때의 좌표 onDrag:요소 지연 과정 에서 이 이 벤트 를 등록 하면 트리거 할 때 두 개의 인자 nx,ny 지연 과정 에서 좌표 가 발생 하 는 오프셋 onDragEnd:요소 가 끝 났 을 때,이 이 벤트 를 등록 하면 트리거 할 때 두 개의 인자 x 를 받 습 니 다.y 는 각각 옮 겨 진 요소 의 현재 좌표 2,onmousedown 이 벤트 를 누구 에 게 연결 해 야 합 니까?예전 에 저 는 끌 리 는 요소 에 연결 되 었 는데 나중에 유연성 이 없 는 것 을 발 견 했 습 니 다.지금 은 관련 이 없 는 요소 에 연결 할 수 있 는 동시에 이 요소 의 드래그 를 실현 하도록 설계 되 었 습 니 다.3.요소 의 이동 과정 에서 초점 을 어떻게 실현 합 니까?브 라 우 저 를 뛰 어 넘 어야 하기 때문에 setCapture 와 같은 방법 을 사용 하지 않 습 니 다.여기 서 생각 을 바 꾸 겠 습 니 다.왜 요소 요소 가 이동 하 는 과정 에서 초점 이 없 습 니까?주로 우 리 는 onmousemove 사건 을 끌 어 당 기 는 요소 에 등 록 했 습 니 다.이것 은 필요 한 것 이 아니 기 때문에 요소 가 onmousedown 사건 을 촉발 한 후에 저 는 onmousemove,onmouseup 이벤트 가 document 에 직접 등록 되 어 있 습 니 다.마 우 스 를 어디로 옮 겨 도 초점 이 있 습 니 다.이렇게 많아

 
Drag = { 
obj: null, 
init: function (options) { 
options.handler.onmousedown = this.start; 
options.handler.root = options.root || options.handler; 
var root = options.handler.root; 
root.onDragStart = options.dragStart || new Function(); 
root.onDrag = options.onDrag || new Function(); 
root.onDragEnd = options.onDragEnd || new Function(); 
}, 
start: function (e) {//   this handler 
var obj = Drag.obj = this; 
obj.style.cursor = 'move'; 
e = e || Drag.fixEvent(window.event); 
ex = e.pageX; 
ey = e.pageY; 
obj.lastMouseX = ex; 
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); 
}, 
drag: function (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) : 0; 
var y = root.style.top ? parseInt(root.style.top) : 0; 
var nx = ex - Drag.obj.lastMouseX + x; 
var ny = ey - Drag.obj.lastMouseY + y; 
root.style.left = nx + "px"; 
root.style.top = ny + "px"; 
Drag.obj.root.onDrag(nx, ny); 
Drag.obj.lastMouseX = ex; 
Drag.obj.lastMouseY = ey; 
}, 
end: function (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: function (e) { 
e.pageX = e.clientX + document.documentElement.scrollLeft; 
e.pageY = e.clientY + document.documentElement.scrollTop; 
return e; 
} 
} 

위 init 는 주로 초기 화 작업 을 처리 합 니 다.예 를 들 어 onDragstart,onDrag,onDragEnd 세 가지 사건 을 기록 하고 handler 는 드래그 사건 을 처리 하 는 요소 이 며 root 는 드래그 된 요소 입 니 다.handler 에서 클릭 한 후 Drag.start 방법 을 터치 하면 Drag.start 는 마우스 가 전체 페이지 에 있 는 위 치 를 기록 합 니 다.document 에 onmouseup,onmousemove 이 벤트 를 등록 하고 onDragstart 이 벤트 를 촉발 합 니 다.Drag.drag 방법 도 간단 합 니 다.옮 겨 진 요소 의 위 치 를 업데이트 하 는 동시에 마우스 가 전체 페이지 에 있 는 위 치 를 기록 하 는 것 이 주요 역할 입 니 다.Drag.end 방법 은 더 간단 합 니 다.마무리 작업 을 하 는 것 입 니 다.마지막 으로 여러분 께 사용 할 코드 를 첨부 해 드 리 겠 습 니 다.즐 거 운 학습 되 세 요!

 
Drag.init({ 
handler: document.getElementById("handler"), 
root:document.getElementById("root"); 
}); 
<div id="root"> 
<h2 id="handler"></h2> 
</div>