[javascript] 드래그 앤 드롭 효과를 활용한 웹사이트용 장바구니 구현 방법

29 Nov 2023

javascript

웹사이트에서 드래그 앤 드롭 효과를 활용하여 사용자가 상품을 장바구니로 이동시킬 수 있는 기능은 매우 유용합니다. 이번 블로그에서는 JavaScript를 이용하여 이러한 웹사이트용 장바구니를 구현하는 방법에 대해 알아보겠습니다.

1. HTML 구조 설정하기

먼저, HTML 구조를 설정해야 합니다. 장바구니 영역과 상품 목록 영역을 구분하여 각각의 요소에 ID를 지정해줍니다.

<div id="cart">
    <h2>장바구니</h2>
</div>

<div id="product-list">
    <ul>
        <li draggable="true">상품 1</li>
        <li draggable="true">상품 2</li>
        <li draggable="true">상품 3</li>
        <li draggable="true">상품 4</li>
    </ul>
</div>

2. 드래그 앤 드롭 이벤트 처리하기

JavaScript를 사용하여 드래그 앤 드롭 이벤트를 처리합니다. dragstart, dragenter, dragover, dragleave, drop 이벤트를 활용하여 장바구니로 상품을 이동시킬 수 있도록 구현합니다.

const cart = document.getElementById("cart");
const productList = document.getElementById("product-list");

cart.addEventListener("dragenter", function(event) {
    event.preventDefault();
});

cart.addEventListener("dragover", function(event) {
    event.preventDefault();
    // 드롭 영역 스타일 변경
    cart.style.backgroundColor = "lightblue";
});

cart.addEventListener("dragleave", function() {
    // 드롭 영역 스타일 원래대로 변경
    cart.style.backgroundColor = "";
});

cart.addEventListener("drop", function(event) {
    event.preventDefault();
    // 드롭 영역 스타일 원래대로 변경
    cart.style.backgroundColor = "";
    
    // 드래그한 상품을 장바구니로 이동시킴
    const product = document.getElementById(event.dataTransfer.getData("text"));
    cart.appendChild(product);
});

productList.addEventListener("dragstart", function(event) {
    // 드래그한 상품의 ID를 저장
    event.dataTransfer.setData("text", event.target.id);
});

3. 스타일링 및 추가 기능 구현

드래그 앤 드롭 효과에 따라 스타일링을 변경하거나 추가 기능을 구현할 수 있습니다. 예를 들어, 장바구니 영역에 상품이 들어올 때 애니메이션 효과를 적용하거나, 장바구니에 담긴 상품의 수량을 업데이트하는 기능을 추가할 수 있습니다. 이러한 부가 기능은 개발자의 요구사항에 따라 다양하게 구현할 수 있습니다.

참고 자료

MDN 웹 문서: 드래그 앤 드롭 API