자 바스 크 립 트 드래그 효과 구현

자 바스 크 립 트 의 드래그 효 과 를 실현 하려 면 먼저 이벤트 대상 이 드래그 효 과 를 실현 하 는 좌표 가 몇 개 있 는 지 알 아야 합 니 다.
이벤트 대상 var e=e|window.event 가 져 오기;
필요 에 따라 끌 어 당 기 는 효과 의 좌표
clientX:마우스 클릭 위치 가 브 라 우 저 시각 영역 에 비해 수평 오프셋(수평 스크롤 거 리 를 계산 하지 않 음)
clientY:마우스 클릭 위치 가 브 라 우 저 시각 영역 에 비해 수직 오프셋(수직 스크롤 바 의 거 리 를 계산 하지 않 음)
offsetX:트리거 이벤트 대상 의 수평 거리 에 비해 마우스 클릭 위치
offsetY:트리거 이벤트 대상 의 수직 거리 에 비해 마우스 클릭 위치
pageX:마우스 클릭 위 치 는 웹 페이지 왼쪽 상단 의 수평 오프셋,즉 clientX 에 수평 스크롤 바 를 더 한 거리 입 니 다.
pageY:마우스 클릭 위 치 는 웹 페이지 왼쪽 상단 의 수직 평 오프셋,즉 clientY 에 수직 스크롤 바 를 추가 하 는 거리 입 니 다.
offset Left:부모 요소 에 포 지 셔 닝 요소 가 있다 면 현재 요소 에서 가장 가 까 운 포 지 셔 닝 요소 의 가장자리 거 리 를 되 돌려 줍 니 다.
offsetTop:부모 요소 에 포 지 셔 닝 요소 가 없 으 면 body 왼쪽 가장자리 거 리 를 되 돌려 줍 니 다.
요소 자체 크기 가 져 오기:offset Width 와 offset Height/client Width 와 client Height
offset Width 와 client Width 의 차이 점:offset Width 는 테 두 리 를 포함 하고,client Width 는 테 두 리 를 포함 하지 않 습 니 다
드래그 필요:clientWidth,clientHeight,clientX,clientY,offsetLeft,offsetTop
우선 html 구조 와 css 스타일 을 구축 합 니 다.

<div class="wrap">
 <div class="cover">

 </div>
</div>

* {
  margin: 0;
  padding: 0;
 }
 
 .wrap {
  width: 500px;
  height: 500px;
  border: 1px solid deeppink;
  position: relative;
  margin: 50px auto;
 }
 
 .cover {
  width: 150px;
  height: 150px;
  background: rgba(200, 7, 99, 0.5);
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  cursor: move;
 }

메모:큰 상자 와 작은 상자 에 위 치 를 정 해 야 합 니 다:자 절 부 상
다음은 자 바스 크 립 트 코드.

<script>
 var wrap = document.querySelector(".wrap");
 var cover = document.querySelector(".cover");
 wrap.onmouseover = function() {
 cover.style.display = "block";
 wrap.onmousemove = function(e) {
  var e = e || window.event;
  var x1 = e.clientX;
  var y1 = e.clientY;
//      e.clientX e.clientY,          e.pageX e.pageY  
  var halfWidth = cover.clientWidth / 2;
  var halfHeight = cover.clientHeight / 2;
  var wrapLeft = wrap.offsetLeft;
  var wrapTop = wrap.offsetTop;
  var l = x1 - wrapLeft - halfWidth;
  var t = y1 - wrapTop - halfHeight;

  if (l <= 0) {
  l = 0
  }
  if (l >= wrap.clientWidth - cover.clientWidth) {
  l = wrap.clientWidth - cover.clientWidth
  }
  if (t <= 0) {
  t = 0
  }
  if (t >= wrap.clientHeight - cover.clientHeight) {
  t = wrap.clientHeight - cover.clientHeight
  }
  cover.style.left = l + "px";
  cover.style.top = t + "px"
 }
 }
 wrap.onmouseout = function() {
 cover.style.display = "none";
 }
</script>

var halfWidth = cover.clientWidth / 2;
var halfHeight = cover.clientHeight / 2;
var wrapLeft = wrap.offsetLeft;
var wrapTop = wrap.offsetTop;
var l = x1 - wrapLeft - halfWidth;
var t = y1 - wrapTop - halfHeight;
//    
  if (l <= 0) {
    l = 0
   }
   if (l >= wrap.clientWidth - cover.clientWidth) {
    l = wrap.clientWidth - cover.clientWidth
   }
   if (t <= 0) {
    t = 0
   }
   if (t >= wrap.clientHeight - cover.clientHeight) {
    t = wrap.clientHeight - cover.clientHeight
   }

주의:작은 상자 가 큰 상자 사이 에서 이동 하 는 범 위 를 제한 하고 왼쪽 상단 의 제한 을 제한 하 며 작은 상자 가 범 위 를 초과 할 때 0 대 치 를 l 과 t 에 부여 합 니 다.오른쪽 아래 작은 상자 가 이동 하 는 범 위 는 큰 상자 너비 에서 작은 상자 의 너 비 를 줄인다.
이 가운데 마 우 스 를 작은 상자(cover)의 가장 중간 에 두 기 위해 서 는 작은 상자 너비 의 절반 을 빼 야 한다.
큰 상자 의 거리 페이지 왼쪽 의 거리 와 위의 거 리 를 빼 면 좌 표를 얻 을 수 있다.
마우스 가 큰 상자 에 들 어가 면 작은 상 자 를 직접 끌 어 당 길 수 있 고 마 우 스 는 작은 상자 의 가장 중간 에 있다.이렇게 하면 간단 한 드래그 효 과 를 완성 할 수 있다.

이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.