JavaScript는 끈적함을 구현합니다.

프런트 엔드 개발에서는 드래그 앤 드롭, 팝업 창 등과 같은 특수 효과를 구현해야 하는 경우가 종종 있습니다. 그 중에서도 끈적이는 효과도 매우 흥미롭고 실용적인 효과입니다. 이 기사에서는 JavaScript를 사용하여 끈적이는 효과를 얻는 방법을 소개합니다.

1. 끈끈이 효과 소개

끈끈이 효과는 요소를 드래그하면 해당 요소가 지정된 요소에 달라붙어 지정된 요소 내에서 자유롭게 이동할 수 있는 효과를 말합니다. 이 효과는 파일 업로드 끌기, 직소 퍼즐 등과 같은 응용 프로그램 시나리오에서 매우 널리 퍼져 있습니다.

2. 끈적끈적한 효과를 얻기 위한 단계

1. 드래그 가능한 요소 만들기

먼저 드래그 가능한 요소를 만들어야 합니다. 구현 과정에서 HTML, CSS 및 JavaScript를 사용하여 완료할 수 있습니다. 예를 들어 다음 코드는 다음과 같습니다.

<div id="drag" class="drag">Drag me!</div>

.drag {
  position: absolute;
  top: 100px;
  left: 100px;
  width: 100px;
  height: 100px;
  background-color: #3498db;
  cursor: move;
}

var drag = document.getElementById("drag");

var posX = 0;
var posY = 0;
var elemX = 0;
var elemY = 0;

drag.onmousedown = function(e) {
  e.preventDefault();

  posX = e.clientX;
  posY = e.clientY;

  elemX = drag.offsetLeft;
  elemY = drag.offsetTop;

  document.onmousemove = dragElement;
  document.onmouseup = stopDragging;
}

function dragElement(e) {
  e.preventDefault();

  var newX = elemX + e.clientX - posX;
  var newY = elemY + e.clientY - posY;

  drag.style.left = newX + "px";
  drag.style.top = newY + "px";
}

function stopDragging() {
  document.onmousemove = null;
  document.onmouseup = null;
}

위 코드에서는 "drag" 클래스를 사용하여 div 요소를 만들고 여기에 스타일을 할당했습니다. 다음으로 드래그 효과를 얻기 위해 JavaScript를 통해 요소에 mousedown, mousemove 및 mouseup 이벤트를 추가했습니다.

2. 지정된 요소 만들기

고정 가능한 대상인 지정된 요소를 만들어야 합니다. 이 예에서는 지정된 요소로 "drop" 클래스가 있는 div 요소를 사용합니다. 예를 들어, 다음 코드는

<div id="drop" class="drop">Drop me here!</div>

.drop {
  position: absolute;
  top: 300px;
  left: 300px;
  width: 200px;
  height: 200px;
  background-color: #e74c3c;
}

3. 끈적 효과를 얻으려면

드래그된 요소가 지정된 요소 내에서 해제될 때 해당 요소를 지정된 요소에 부착하고 요소 내에서 자유롭게 이동해야 합니다. 구현 코드는 다음과 같습니다.

var drop = document.getElementById("drop");

drag.onmouseup = function(e) {
  var rect = drop.getBoundingClientRect();

  if (elemX >= rect.left && elemX <= rect.right && elemY >= rect.top && elemY <= rect.bottom) {
    drop.appendChild(drag);
    drag.style.position = "relative";
    drag.style.left = "0";
    drag.style.top = "0";
  }
}

위 코드에서는 getBoundingClientRect() 메서드를 통해 지정된 요소의 직사각형 영역을 얻습니다. 그런 다음 mouseup 이벤트에서 드래그된 요소의 위치가 직사각형 영역 내에 있는지 확인합니다. 이 영역 내에 있으면 지정된 요소에 드래그 요소를 추가하고 지정된 요소 내에서 자유롭게 이동할 수 있도록 위치를 상대 위치로 설정합니다.

3. 끈적끈적 효과 최적화

위의 코드는 이미 기본적인 끈적끈적한 효과를 얻을 수 있지만, 효과의 부드러움과 신뢰성을 향상시키기 위해 주의해야 할 몇 가지 세부 사항이 여전히 있습니다.

1. 드래그 요소 마우스 팔로우

요소를 드래그할 때 사용자 경험을 향상시키기 위해 드래그된 요소의 중앙에 마우스 위치를 지정할 수 있습니다. 다음은 구현 코드입니다.

drag.onmousemove = function(e) {
  drag.style.cursor = "move";

  var posX = e.clientX - drag.offsetWidth / 2;
  var posY = e.clientY - drag.offsetHeight / 2;

  drag.style.left = posX + "px";
  drag.style.top = posY + "px";
}

2. 드래그된 요소의 잠금을 해제합니다

구현 코드에서는 드래그 효과를 얻기 위해 document.onmousemove 및 document.onmouseup을 사용합니다. 그러나 드래그된 요소가 상위 요소 외부로 이동하면 mousemove 및 mouseup 이벤트가 계속 트리거되어 드래그된 요소를 놓을 수 없게 됩니다. 이 문제를 해결하려면 mousedown 이벤트에서 드래그된 요소를 잠그고 mouseup 이벤트에서 해제해야 합니다. 구현 코드는 다음과 같습니다.

var isDragging = false;

drag.onmousedown = function(e) {
  e.preventDefault();

  isDragging = true;

  posX = e.clientX;
  posY = e.clientY;

  elemX = drag.offsetLeft;
  elemY = drag.offsetTop;

  document.onmousemove = dragElement;
  document.onmouseup = stopDragging;
}

function stopDragging(e) {
  isDragging = false;

  document.onmousemove = null;
  document.onmouseup = null;
}

document.onmousemove = function(e) {
  if (isDragging) {
    var posX = e.clientX - drag.offsetWidth / 2;
    var posY = e.clientY - drag.offsetHeight / 2;

    drag.style.left = posX + "px";
    drag.style.top = posY + "px";
  }
}

3. Sticky 요소 경계 제한

드래그된 요소가 지정된 요소 밖으로 이동할 때 예기치 않은 동작이 발생합니다. 따라서 접착 효과에 경계 제약 조건을 추가해야 합니다. 구현 코드는 다음과 같습니다.

drag.onmouseup = function(e) {
  var rect = drop.getBoundingClientRect();

  if (elemX >= rect.left && elemX <= rect.right && elemY >= rect.top && elemY <= rect.bottom) {
    drop.appendChild(drag);
    drag.style.position = "relative";
    drag.style.left = "0";
    drag.style.top = "0";
  } else {
    drag.style.top = Math.max(0, Math.min(drop.offsetHeight - drag.offsetHeight, e.clientY - rect.top - drag.offsetHeight / 2)) + "px";
    drag.style.left = Math.max(0, Math.min(drop.offsetWidth - drag.offsetWidth, e.clientX - rect.left - drag.offsetWidth / 2)) + "px";
  }
}

위 코드에서는 Math.max 및 Math.min 메서드를 사용하여 드래그되는 요소의 경계를 제한합니다. 이렇게 하면 드래그된 요소가 지정된 요소의 경계 밖으로 이동할 수 없습니다.

4. 요약

이 글에서는 JavaScript를 사용하여 끈끈한 효과를 얻는 방법을 소개하고 구현 과정에서 최적화에 대해 자세히 설명합니다. 실제 시나리오에서는 끈적이 효과가 매우 유용하며 이 문서에서 설명하는 방법은 다른 애플리케이션 시나리오에도 적용할 수 있습니다. 끈적끈적한 효과는 간단해 보이지만, 아직 세부 사항이 많아 구현자가 좀 더 주의를 기울여야 합니다.

위 내용은 JavaScript는 끈적함을 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!