정말 드래그 ...

왜 요소를 드래그 가능하게 만드나요?
드래그 가능한 요소는 다음과 같은 다양한 애플리케이션에서 유용성을 크게 향상시킬 수 있습니다.

1. 대시보드: 사용자는 자신의 취향에 맞게 위젯을 재정렬할 수 있습니다.
2. 이미지 갤러리: 사용자는 더 나은 레이아웃을 위해 이미지 위치를 변경할 수 있습니다.
3. 작업 보드: 사용자는 여러 열 사이에 작업을 끌어서 놓을 수 있습니다.

드래그 가능한 요소 구현

코드를 살펴보겠습니다! 다음은 HTML 요소를 드래그 가능하게 만드는 JavaScript 함수입니다. 이 기능을 사용하면 끌기 동작을 시작하는 핸들 요소를 지정할 수 있어 보다 제어된 사용자 경험을 제공할 수 있습니다.

`function makeElementDraggable(selector: string, handlerSelector?: string): void {
const draggableElements: HTMLElement[] = selector.startsWith("#")
? [document.getElementById(selector.slice(1)) as HTMLElement]
: Array.from(document.getElementsByClassName(selector.slice(1)) as HTMLCollectionOf);

draggableElements.forEach((draggable) => {
  if (!draggable) return;

  const handleElement = handleSelector ? draggable.querySelector(handleSelector) as HTMLElement : draggable;
  if (!handleElement) return;

  let isMouseDown = false;
  let initX = 0, initY = 0, offsetX = 0, offsetY = 0;

  function mouseDown(e: MouseEvent): void {
    isMouseDown = true;
    handleElement.style.cursor = "default";
    offsetX = draggable.offsetLeft;
    offsetY = draggable.offsetTop;
    initX = e.clientX - offsetX;
    initY = e.clientY - offsetY;
    document.addEventListener("mousemove", mouseMove);
    document.addEventListener("mouseup", mouseUp);
  }

  function mouseMove(e: MouseEvent): void {
    if (!isMouseDown) return;
    const x = e.clientX - initX;
    const y = e.clientY - initY;
    draggable.style.setProperty("left", `${x}px`, "important");
    draggable.style.setProperty("top", `${y}px`, "important");
    draggable.style.position = "fixed"; 
  }

  function mouseUp(): void {
    isMouseDown = false;
    handleElement.style.cursor = "move";
    document.removeEventListener("mousemove", mouseMove);
    document.removeEventListener("mouseup", mouseUp);
  }

  handleElement.style.cursor = "move";
  handleElement.addEventListener("mousedown", mouseDown);
});

}`

작동 방식

1. 요소 선택: 이 함수는 드래그 가능하게 만들 요소를 식별하기 위해 CSS 선택기를 허용합니다. ID(# 사용) 또는 클래스(. 사용)를 지정할 수 있습니다. 선택적 두 번째 매개변수를 사용하면 드래그를 시작하는 핸들 요소를 정의할 수 있습니다.

2. 마우스 이벤트:

• mousedown: 사용자가 핸들에 있는 마우스 버튼을 누르면 움직임 추적이 시작됩니다.
• mousemove: 사용자가 버튼을 누른 채 마우스를 움직이면 현재 마우스 위치를 기준으로 드래그 가능한 요소의 위치가 업데이트됩니다.
• mouseup: 사용자가 마우스 버튼을 놓으면 움직임 추적이 중지됩니다.

1. 위치 지정: 드래그 가능한 요소의 위치는 CSS 속성(왼쪽 및 위쪽)을 사용하여 설정됩니다. 위치는 고정으로 설정되어 뷰포트 어느 곳에나 배치할 수 있습니다.

직접 사용하려면 :-
makeElementDraggable('#myDraggableElement', '.handle');

이 예에서는 .handle을 드래그 핸들로 사용하여 #myDraggableElement를 드래그 가능하게 만듭니다.
결론
웹 애플리케이션에 드래그 가능한 요소를 구현하면 상호작용성과 사용자 만족도를 크게 향상시킬 수 있습니다. 제공된 코드 조각은 최소한의 설정으로 이를 달성할 수 있는 간단한 방법을 제공합니다. 프로젝트에서 사용해 보고 사용자 인터페이스가 어떻게 향상되는지 확인하세요!

반응에서도 동일한 작업을 수행할 수 있습니다. 동일한 작업을 수행하는 useDraggable과 같은 사용자 정의 후크를 생성하세요.
고마워요, 안녕

위 내용은 정말 드래그 ...의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!