이 글에서는 자바스크립트 드래그 앤 드롭의 프로토타입을 주로 소개합니다(코드를 한줄씩 분석하여 드래그 앤 드롭의 원리를 쉽게 이해할 수 있습니다). 필요한 친구들은
의 원리를 참고하세요. 드래그 앤 드롭: 사실은 마우스이고 왼쪽 상단으로부터의 거리는 그대로 유지됩니다. 아래 사진을 보시죠.
이 빨간 점은 쥐입니다.
드래그는 실제로 마우스 위치를 통해 개체의 위치를 계산하는 것을 의미합니다. 너무 간단하고 고집스럽습니다. 그렇다면 이 거리는 어떻게 구하는가? ?
마우스 위치와 개체 위치의 차이는 거리겠죠? 그러면 이 대각선은 수평선과 수직선으로 구성됩니다.
프로그램 진행 방법을 살펴보겠습니다.
<p id="p1"></p>
사실 그가 바꾼 것은 어떤 p의 왼쪽 상단이었는데, 그러다가 움직이기 시작했다. 그 방법에는 절대 위치 지정이 있어야겠죠?
<style type="text/css"> #p1 { width: 200px; height: 200px; background: red; position: absolute; } </style>
여기에는 여러 단계가 있습니다. 1. 마우스 아래로 2. 마우스 위로 3. 마우스 이동
<script type="text/javascript"> window.onload = function() { var op = document.getElementById("p1"); var disX = 0; var disY = 0; op.onmousedown = function(ev) { var oEvent = ev || event; // 浏览器兼容 disX = oEvent.clientX - op.offsetLeft; // 横向的位置就是鼠标的位置-p的位置 disY = oEvent.clientY - op.offsetTop; }; op.onmousemove = function(ev) { var oEvent = ev || event; op.style.left = oEvent.clientX - disX+'px'; // 当前鼠标的位置-disX op.style.top = oEvent.clientY - disY+'px'; }; }; </script>
그림을 보고 대화하세요.
var opLeft = oEvent.clientX - disX;
사진으로 보니 확연히 보이네요
mouseup 이제 효과는 보지 말자구요. .
클릭하지 않아도 마우스가 따라다니는 현상을 발견하게 됩니다. ? ?
mousemove를 살펴보자: Javascript에서는 시작하기 전에 마우스를 눌러야 한다고 규정한 적이 없지 않습니까? 마우스를 눌렀는지 안 눌렀는지에 관계없이 계속해서 mousemove가 발생하므로 여기서 문제가 발생합니다. . 마우스를 누르기 전에는 마우스를 그 위에 올려도 반응이 없어야 합니다. 마우스를 누를 때만 반응합니다.
그래서 이 mousemove는 뜨자마자 추가하면 안되고, 마우스가 눌릴 때까지 기다렸다가 수정된 코드를 살펴보겠습니다.
그나저나 mouseup을 추가하면 그 역할이 반영됩니다. 함수는 op.onmousemove = null입니다. 이동 이벤트를 제거합니다.
그렇지 않으면 마우스를 놓으면 개체가 계속 따라옵니다. op.onmouseup = null; 쓰레기를 버리지 않고서는 마우스를 키워도 소용이 없습니다.
수정된 코드를 살펴보겠습니다.
<script type="text/javascript"> window.onload = function() { var op = document.getElementById("p1"); var disX = 0; var disY = 0; op.onmousedown = function(ev) { var oEvent = ev || event; // 浏览器兼容 disX = oEvent.clientX - op.offsetLeft; // 横向的位置就是鼠标的位置-p的位置 disY = oEvent.clientY - op.offsetTop; op.onmousemove = function(ev) { var oEvent = ev || event; op.style.left = oEvent.clientX - disX+'px'; // 当前鼠标的位置-disX op.style.top = oEvent.clientY - disY+'px'; }; op.onmouseup = function() { op.onmousemove = null; op.onmouseup = null; // 不留垃圾,鼠标抬起本来也就没有用了 }; }; }; </script>
이제 간단한 Drag it out을 만들었습니다. 물론 아직 해결해야 할 몇 가지 작은 문제도 있습니다.
하지만 어쨌든 우리는 이미 드래그 앤 드롭의 프로토타입을 갖고 있습니다.
위 내용은 이 장의 전체 내용입니다. 더 많은 관련 튜토리얼을 보려면 JavaScript 비디오 튜토리얼을 방문하세요.