자바스크립트로 드래그 애니메이션 만들기

18 Oct 2023

javascript

드래그 애니메이션은 웹 페이지에서 요소를 마우스로 끌어서 이동시키는 효과를 만드는데 사용됩니다. 자바스크립트를 활용하여 간단한 드래그 애니메이션을 만들어보겠습니다.

HTML 마크업 작성하기

먼저, 드래그 애니메이션을 적용할 HTML 요소를 작성합니다. 예를 들어, <div> 요소를 사용하여 드래그하고자 하는 객체를 만들 수 있습니다.

<div id="dragElement">드래그할 요소</div>

CSS 스타일 지정하기

다음으로, 드래그할 요소에 적용할 CSS 스타일을 지정합니다. 이 예제에서는 드래그할 요소가 마우스 아래로 이동하는 애니메이션을 만들 것입니다.

<style>
#dragElement {
    position: absolute;
}

</style>

자바스크립트 코드 작성하기

이제 드래그 애니메이션을 처리하는 자바스크립트 코드를 작성합니다. 이 예제에서는 mousedown, mousemove, mouseup 이벤트를 사용하여 드래그 연산을 수행합니다.

var dragElement = document.getElementById("dragElement");
var isDragging = false;
var mouseOffset = { x: 0, y: 0 };

// 마우스를 눌렀을 때
dragElement.addEventListener("mousedown", function (event) {
    isDragging = true;
    mouseOffset.x = event.clientX - dragElement.offsetLeft;
    mouseOffset.y = event.clientY - dragElement.offsetTop;
});

// 마우스를 움직였을 때
document.addEventListener("mousemove", function (event) {
    if (isDragging) {
        dragElement.style.left = event.clientX - mouseOffset.x + "px";
        dragElement.style.top = event.clientY - mouseOffset.y + "px";
    }
});

// 마우스를 놓았을 때
document.addEventListener("mouseup", function () {
    isDragging = false;
});

결과 확인하기

간단한 드래그 애니메이션을 만들었습니다. 웹 페이지를 열고 드래그할 요소를 클릭한 후 마우스를 움직여서 요소를 드래그할 수 있습니다.

이제 자신만의 스타일 및 기능을 추가하여 좀 더 흥미로운 드래그 애니메이션을 만들어보세요!

참고 자료

#javascript #드래그애니메이션