네이티브 js 드래그 앤 드롭(1강은 호환되지 않음) 드래그 앤 드롭 ideas_javascript 기술

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

/*
드래그 앤 드롭 과정:
1. 챕터 한 번에 드래그해야 하는 요소를 클릭하세요
2. 클릭 중인 요소가 선택되어 이동됩니다
3. 마우스가 위로 올라가면 액션이 중지됩니다
4. oDIV 요소를 클릭하면 사용할 수 있는 oDIV 영역이고 move 및 up은 전체 문서, 즉 문서
*/
oDIV = document.getElementById("gaga")에 공통되는 전역 영역입니다. );
oDIV.onmousedown = 사용해야 함 function( e ){ // 마우스를 클릭한 경우
var diffX = e.clientX - oDIV.offsetLeft; // 클릭된 위치는 마우스의 가장 왼쪽 위치입니다. 브라우저(clientX)에서 클릭한 요소로부터의 거리를 뺀 값 왼쪽 위치(oDIV.offetLeft)는 트리거에서 클릭한 요소의 가장 왼쪽 위치와 확실하지 않으므로 이 결과가 필요합니다.
var diffY = e.clientY - oDIV. offsetTop; // 클릭한 요소와 브라우저 사이의 거리 상단(oDIV.offsetTop)에서 클릭한 요소의 위치에서 상단(clientY)의 위치를 ​​뺍니다. , 그래서 이 결과가 필요합니다
document.onmousemove = function( e ){ // 마우스를 누르고 있을 때
var e = e || window.event
oDIV.style.top; .clientY - diffY "px";
oDIV.style.left = e.clientX - diffX "px"
};
document.onmouseup = function(){ // 마우스가 튀어오르는 경우
document.onmousemove = null; // 마우스 버튼이 해제되지 않은 이벤트 지우기
document.onmouseup = null; // 마우스 업 이벤트 지우기
}