자바스크립트 드래그 앤 드롭 프로토타입

이 글에서는 자바스크립트 드래그 앤 드롭의 프로토타입을 주로 소개합니다(코드를 한줄씩 분석하여 드래그 앤 드롭의 원리를 쉽게 이해할 수 있습니다). 필요한 친구들은

의 원리를 참고하세요. 드래그 앤 드롭: 사실은 마우스이고 왼쪽 상단으로부터의 거리는 그대로 유지됩니다. 아래 사진을 보시죠.

이 빨간 점은 쥐입니다.

드래그는 실제로 마우스 위치를 통해 개체의 위치를 ​​계산하는 것을 의미합니다. 너무 간단하고 고집스럽습니다. 그렇다면 이 거리는 어떻게 구하는가? ?

마우스 위치와 개체 위치의 차이는 거리겠죠? 그러면 이 대각선은 수평선과 수직선으로 구성됩니다.

프로그램 진행 방법을 살펴보겠습니다.

<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+&#39;px&#39;; // 当前鼠标的位置-disX
      op.style.top = oEvent.clientY - disY+&#39;px&#39;;
     };
   };
  </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+&#39;px&#39;; // 当前鼠标的位置-disX
      op.style.top = oEvent.clientY - disY+&#39;px&#39;;
     };
     op.onmouseup = function() {
      op.onmousemove = null;
      op.onmouseup = null; // 不留垃圾,鼠标抬起本来也就没有用了
     };

    };

   };
  </script>

이제 간단한 Drag it out을 만들었습니다. 물론 아직 해결해야 할 몇 가지 작은 문제도 있습니다.

하지만 어쨌든 우리는 이미 드래그 앤 드롭의 프로토타입을 갖고 있습니다.

위 내용은 이 장의 전체 내용입니다. 더 많은 관련 튜토리얼을 보려면 JavaScript 비디오 튜토리얼을 방문하세요.