[javascript] 콘텍스트 메뉴에서 드래그 앤 드롭 동작 구현하기

11 Dec 2023

javascript

콘텍스트 메뉴(context menu)는 웹 애플리케이션에서 사용자가 특정 요소를 오른쪽 클릭할 때 나타나는 작은 메뉴를 의미합니다. 이러한 메뉴를 통해 드래그 앤 드롭 동작을 구현하는 방법에 대해 살펴보겠습니다.

1. 드래그 앤 드롭 API 활용

우선, 드래그 앤 드롭을 위해서는 HTML5 드래그 앤 드롭 API를 활용해야 합니다.

element.addEventListener("dragstart", function(event) {
    // 드래그 시작 시 동작
});

element.addEventListener("drop", function(event) {
    // 드롭 시 동작
});

2. 콘텍스트 메뉴와의 연동

콘텍스트 메뉴에서 항목을 선택한 후, 해당 항목을 드래그할 수 있도록 설정해야 합니다. 이를 위해 콘텍스트 메뉴 이벤트를 처리하고 드래그 앤 드롭 API와 연동해야 합니다.

// 콘텍스트 메뉴 표시
element.addEventListener("contextmenu", function(event) {
    event.preventDefault(); // 기본 메뉴 표시 방지
    // 콘텍스트 메뉴 표시
});

// 콘텍스트 메뉴에서의 항목 선택 시
menuItem.addEventListener("click", function(event) {
    // 드래그 앤 드롭 API를 통한 동작
});

3. 드래그 앤 드롭 처리

드래그 앤 드롭 API를 통해 실제로 요소를 드래그하고 드롭하는 동작을 처리해야 합니다. 요소의 드래그를 시작하고 드롭하는 등의 작업을 여기에서 수행합니다.

element.addEventListener("dragstart", function(event) {
    event.dataTransfer.setData("text/plain", "example"); // 드래그할 데이터 설정
});

element.addEventListener("drop", function(event) {
    const data = event.dataTransfer.getData("text/plain"); // 드롭된 데이터 확인
    // 드롭된 데이터 처리
});

4. 실제 예제 따라하기

위의 개념을 바탕으로, 실제로 콘텍스트 메뉴와 드래그 앤 드롭을 결합한 동작을 구현해 볼 수 있습니다.

이러한 동작을 적용한 예시 코드는 다음과 같습니다.

<!DOCTYPE html>
<html>
<body>

<div id="draggable" draggable="true" ondragstart="event.dataTransfer.setData('text/plain', 'example')">드래그할 요소</div>

<script>
document.addEventListener("contextmenu", function(event) {
    event.preventDefault();
    const draggable = document.getElementById("draggable");
    draggable.style.display = "block";
    draggable.style.position = "absolute";
    draggable.style.left = event.pageX + "px";
    draggable.style.top = event.pageY + "px";
});

document.addEventListener("drop", function(event) {
    event.preventDefault();
    const data = event.dataTransfer.getData("text/plain");
    console.log("드롭된 데이터: " + data);
});
</script>

</body>
</html>

마무리

이제 개발자는 위의 내용을 바탕으로 콘텍스트 메뉴에서 드래그 앤 드롭 동작을 구현할 수 있을 것입니다. 이를 통해 사용자 경험을 향상시키고 웹 애플리케이션의 기능을 보다 다양하게 확장할 수 있습니다.

참고 문헌: MDN Web Docs