js를 사용하여 드래그 앤 드롭 기능을 구현하는 방법

이번에는 js를 사용하여 드래그 앤 드롭 기능을 구현하는 방법과 js를 사용하여 드래그 앤 드롭 기능을 구현할 때 주의 사항이 무엇인지 보여드리겠습니다. 다음은 실제 사례입니다.

오브젝트 드래그를 설정하려면 세 가지 이벤트를 사용해야 하며, 이 세 가지 이벤트의 사용 순서는 바뀔 수 없습니다.

1.onmousedown: 마우스 다운 이벤트
2.onmousemove: 마우스 이동 이벤트
3.onmouseup: 마우스 업 이벤트

드래그의 기본 원리는 마우스의 움직임에 따라 드래그된 요소를 이동시키는 것입니다. 마우스의 움직임은 x 및 y 좌표의 변화이며, 요소의 움직임은 style.position의 상단과 왼쪽의 변화입니다. 물론, 마우스를 움직인다고 해서 반드시 요소가 움직이는 것은 아닙니다. 대신 마우스 왼쪽 버튼이 눌려져 있는지, 드래그 가능한 요소에서 눌려져 있는지를 확인해야 합니다.

기본 아이디어는 다음과 같습니다.

拖拽状态 = 0鼠标在元素上按下的时候{   
  拖拽状态 = 1   
  记录下鼠标的x和y坐标   
  记录下元素的x和y坐标   
  }  
 鼠标在元素上移动的时候{   
  如果拖拽状态是0就什么也不做。   
  如果拖拽状态是1，那么   
  元素y = 现在鼠标y - 原来鼠标y + 原来元素y   
  元素x = 现在鼠标x - 原来鼠标x + 原来元素x   
  }    
 鼠标在任何时候放开的时候{   
  拖拽状态 = 0   
}

예제 코드 부분:

HTML 부분

<p class="calculator" id="drag">**********</p>

CSS 부분

calculator { 
  position: absolute; /*设置绝对定位，脱离文档流，便于拖拽*/ 
  display: block; 
  width: 218px; 
  height: 280px; 
  cursor: move;  /*鼠标呈拖拽状*/ 
}

JS 부분

window.onload = function() { 
  //拖拽功能(主要是触发三个事件：onmousedown\onmousemove\onmouseup) 
  var drag = document.getElementById('drag'); 
  //点击某物体时，用drag对象即可，move和up是全局区域，也就是整个文档通用，应该使用document对象而不是drag对象(否则，采用drag对象时物体只能往右方或下方移动) 
  drag.onmousedown = function(e) { 
    var e = e || window.event; //兼容ie浏览器 
    var diffX = e.clientX - drag.offsetLeft; //鼠标点击物体那一刻相对于物体左侧边框的距离=点击时的位置相对于浏览器最左边的距离-物体左边框相对于浏览器最左边的距离 
    var diffY = e.clientY - drag.offsetTop; 
    /*低版本ie bug:物体被拖出浏览器可是窗口外部时，还会出现滚动条， 
      解决方法是采用ie浏览器独有的2个方法setCapture()\releaseCapture(),这两个方法， 
      可以让鼠标滑动到浏览器外部也可以捕获到事件，而我们的bug就是当鼠标移出浏览器的时候， 
      限制超过的功能就失效了。用这个方法，即可解决这个问题。注：这两个方法用于onmousedown和onmouseup中*/ 
      if(typeof drag.setCapture!='undefined'){ 
        drag.setCapture(); 
      } 
    document.onmousemove = function(e) { 
      var e = e || window.event; //兼容ie浏览器 
      var left=e.clientX-diffX; 
      var top=e.clientY-diffY; 
      //控制拖拽物体的范围只能在浏览器视窗内，不允许出现滚动条 
      if(left<0){ 
        left=0; 
      }else if(left >window.innerWidth-drag.offsetWidth){ 
        left = window.innerWidth-drag.offsetWidth; 
      } 
      if(top<0){ 
        top=0; 
      }else if(top >window.innerHeight-drag.offsetHeight){ 
        top = window.innerHeight-drag.offsetHeight; 
      } 
      //移动时重新得到物体的距离，解决拖动时出现晃动的现象 
      drag.style.left = left+ 'px'; 
      drag.style.top = top + 'px'; 
    }; 
    document.onmouseup = function(e) { //当鼠标弹起来的时候不再移动 
      this.onmousemove = null; 
      this.onmouseup = null; //预防鼠标弹起来后还会循环（即预防鼠标放上去的时候还会移动） 
      //修复低版本ie bug 
      if(typeof drag.releaseCapture!='undefined'){ 
        drag.releaseCapture(); 
      } 
    }; 
  }; 
};

이 글의 사례를 읽으신 후 방법을 마스터하셨다고 믿습니다. 더 흥미로운 내용을 보려면 다른 PHP 중국어 웹사이트 관련 기사를 주목하세요!

추천 자료:

vue는 휴대폰에서 SMS 인증 코드 등록 기능을 보낼 수 있도록 합니다.

Angular를 사용하여 구성 요소를 실행하는 방법

위 내용은 js를 사용하여 드래그 앤 드롭 기능을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!