Colin's Blog
[javascript] 드래그 앤 드롭 효과를 활용한 웹사이트용 이미지 갤러리 구현 방법

이미지 갤러리는 웹사이트 디자인에 더욱 매력을 더해주는 중요한 요소 중 하나입니다. 이 글에서는 드래그 앤 드롭 효과를 활용하여 이미지 갤러리를 구현하는 방법을 소개하겠습니다.

필요한 기술

이 프로젝트를 구현하기 위해 다음과 같은 기술이 필요합니다:

먼저 HTML 파일을 작성해보겠습니다.

<!DOCTYPE html>
<html>
<head>
    <title>이미지 갤러리</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <div class="gallery">
        <div class="image" draggable="true">
            <img src="image1.jpg">
        </div>
        <div class="image" draggable="true">
            <img src="image2.jpg">
        </div>
        <div class="image" draggable="true">
            <img src="image3.jpg">
        </div>
        <div class="image" draggable="true">
            <img src="image4.jpg">
        </div>
    </div>

    <script src="script.js"></script>
</body>
</html>

위의 코드는 이미지 갤러리를 포함하는 기본적인 HTML 구조입니다. 이미지는 img 요소로 표시되며, 드래그 앤 드롭 가능하도록 draggable 속성을 추가했습니다.

다음으로, CSS 파일을 작성해보겠습니다. 이미지 갤러리를 원하는 스타일로 꾸밀 수 있습니다.

.gallery {
    display: flex;
    flex-wrap: wrap;
}

.image {
    width: 200px;
    height: 200px;
    margin: 10px;
    border: 1px solid black;
}

img {
    width: 100%;
    height: 100%;
}

.image.dragging {
    opacity: 0.5;
}

위의 코드는 이미지 갤러리의 기본적인 스타일을 정의하는 CSS입니다. display: flex를 사용하여 이미지를 격자 형태로 배치했고, 각 이미지는 width, height, margin 및 border 속성으로 스타일링되었습니다. dragging 클래스는 이미지를 드래그할 때 투명도를 조정하기 위해 사용됩니다.

마지막으로, JavaScript 파일을 작성하여 드래그 앤 드롭 효과를 구현해보겠습니다.

const images = document.querySelectorAll('.image');

let draggingImage = null;
let startX = 0;
let startY = 0;

images.forEach(image => {
    image.addEventListener('dragstart', dragStart);
    image.addEventListener('dragend', dragEnd);
});

function dragStart(event) {
    draggingImage = event.target;
    startX = event.clientX;
    startY = event.clientY;
    setTimeout(() => {
        event.target.classList.add('dragging');
    }, 0);
}

function dragEnd(event) {
    event.target.classList.remove('dragging');
    const endX = event.clientX;
    const endY = event.clientY;
    const deltaX = endX - startX;
    const deltaY = endY - startY;
    // 드래그한 거리에 따라 이미지 이동 로직을 구현할 수 있습니다.
    draggingImage = null;
    startX = 0;
    startY = 0;
}

위의 코드는 이미지를 드래그할 때 발생하는 dragstart 및 dragend 이벤트를 처리합니다. dragStart 함수에서는 드래그 시작 위치를 기억하고, dragEnd 함수에서는 이미지 이동 로직을 구현할 수 있습니다. 위의 코드에서는 단순히 드래그한 거리를 계산하여 로그에 출력하는 예시이며, 실제 프로젝트에서는 원하는 동작을 구현하면 됩니다.

드래그 앤 드롭 효과를 활용한 이미지 갤러리를 구현하는 방법을 알아보았습니다. 이제 구현한 코드를 웹사이트에 적용하고, 필요에 따라 추가적인 기능을 구현하여 매력적인 이미지 갤러리를 만들어보세요.

© 2018 Colin. All rights reserved.