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

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 방법은 훨씬 더 간단합니다. 마무리 작업만 하면 됩니다.

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