왜 요소를 드래그 가능하게 만드나요?
드래그 가능한 요소는 다음과 같은 다양한 애플리케이션에서 유용성을 크게 향상시킬 수 있습니다.
드래그 가능한 요소 구현
코드를 살펴보겠습니다! 다음은 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); });
}`
작동 방식
요소 선택: 이 함수는 드래그 가능하게 만들 요소를 식별하기 위해 CSS 선택기를 허용합니다. ID(# 사용) 또는 클래스(. 사용)를 지정할 수 있습니다. 선택적 두 번째 매개변수를 사용하면 드래그를 시작하는 핸들 요소를 정의할 수 있습니다.
마우스 이벤트:
직접 사용하려면 :-
makeElementDraggable('#myDraggableElement', '.handle');
이 예에서는 .handle을 드래그 핸들로 사용하여 #myDraggableElement를 드래그 가능하게 만듭니다.
결론
웹 애플리케이션에 드래그 가능한 요소를 구현하면 상호작용성과 사용자 만족도를 크게 향상시킬 수 있습니다. 제공된 코드 조각은 최소한의 설정으로 이를 달성할 수 있는 간단한 방법을 제공합니다. 프로젝트에서 사용해 보고 사용자 인터페이스가 어떻게 향상되는지 확인하세요!
반응에서도 동일한 작업을 수행할 수 있습니다. 동일한 작업을 수행하는 useDraggable과 같은 사용자 정의 후크를 생성하세요.
고마워요, 안녕
위 내용은 정말 드래그 ...의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!